L'article suivant fournit un aperçu du HTML de tableau vertical. Dans le tableau HTML, chaque nouvel enregistrement est inséré sous forme de lignes et de colonnes dans la base de données. Les lignes sont considérées comme horizontales et les colonnes sont verticales dans la base de données. Les tableaux HTML sont vraiment utilisés pour présenter des informations pour un framework comme Bootstrap ; nous sommes en mesure d’améliorer facilement l’apparence et la convivialité de la table. Les tableaux sont utilisés pour la majorité des applications telles que les applications Web, de bureau ou mobiles ; c’est également important pour fournir des informations aux utilisateurs finaux. Utiliser le framework bootstrap et de nombreuses autres fonctionnalités pour fournir les fonctions de style et optimiser la présentation de différents éléments comme les tableaux.
En général, nous devons créer un tableau à l'aide de
| , | balises. Dans ce |
|---|---|
| spécifie les en-têtes du tableau, | il spécifie les valeurs en HTML. Nous avons vu quelques exemples ci-dessous :
Exemple#1Code : <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:75%">
<tr>
<th>Name:</th>
<td>Sivaraman</td>
</tr>
<tr>
<th>Mobile:</th>
<td>123456789</td>
</tr>
<tr>
</table>
</body>
</html>Copier après la connexion Sortie :
Dans l'exemple ci-dessus, nous avons vu deux titres affichés du côté vertical ; ils sont affichés sous forme de colonnes. C'est l'un des exemples de base d'affichage vertical de données dans les tableaux HTML. Exemple n°2Code : <html>
<head>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
tbody { border-top: 2px solid black; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>
</head>
<table class="scroll">
<thead>
<tr>
<th scope="col" colspan="1">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siva</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>Raman</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>Sivaraman</td>
<td>31</td>
</tr>
</tbody>
</table>
</html>Copier après la connexion Sortie :
Dans l'exemple ci-dessus, nous utiliserons les options de défilement. Par défaut, l'option de défilement vertical est activée pour les données du tableau. Nous avons également activé les options de défilement horizontal si nécessaire. Exemple #3Code : <style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th, td { display: block; }
</style>
<form >
<table border="1" class="variant-table" >
<tr>
<td style="background-color: #53B3AE;">Name</td>
<td style="background-color: #53B3AE;">Number</td>
<td style="background-color: #53B3AE;">Age</td>
<td style="background-color: #53B3AE;">ID</td>
</tr>
</table>
</form>Copier après la connexion Sortie :
Dans l'exemple ci-dessus, nous avons mis en évidence les colonnes en utilisant le style background-color. Nous utilisons également la couleur de premier plan pour mettre en évidence les portions si nécessaire. Tableaux dans différentes sectionsNous avons également utilisé un ensemble différent de formatage de tableau dans les tableaux HTML. Dans les exemples ci-dessus, nous avons utilisé les bases pour les alignements verticaux des tableaux ; nous avons un ensemble de formatage différent pour mettre en évidence les tableaux : Bordures et règles : À l'aide des bordures, les cadres autour des tables seront mis en évidence. <TABLE border="1" summary="Welcome to My Domain."> <CAPTION>IT</CAPTION> <TR> <TH>Name</TH> <TH>Age</TH> <TH>Number</TH> <TR> <TD>Sivaraman</TD> <TD>30</TD> <TD>8220244056</TD> <TR> <TD>Raman</TD> <TD>31</TD> <TD>123456789</TD> </TABLE> Copier après la connexion
Nous avons vu les bordures pour les exemples ci-dessus ; c'est une frontière réglementée ; nous utilisons également d'autres bordures comme la ligne pointillée, etc. Comment centrer une image verticalement en HTML ?Nous alignons également les images verticalement pour le HTML ; en utilisant le style CSS, nous devons attribuer les paramètres dans la balise de style et nous avons affiché l'image en mode vertical. Code : <html> <body bgcolor="#ffffff"> <center> <table width="100%" height="100%" bgcolor="#a3ddc4"> <tr> <td align="center"> <table width="800" height="500" bgcolor="#ff6f6f"> <tr> <td> </td> </tr> </table> </td> </tr> </table> <!-- For Internet Explorer 3--> <center> </body> </html> Copier après la connexion Sortie :
L'exemple ci-dessus montre que l'image est en mode vertical ; nous changeons également l’orientation si nécessaire. En utilisant le mode vertical, l'espace sera réduit et les autres contenus de la page seront affichés sur une seule page elle-même par rapport au mode horizontal. Les tableaux HTML externes constituent la zone du navigateur Web, à l'exception des bordures, un tableau HTML, et toute la zone sera constituée de cellules de tableau HTML. Les cellules externes et internes du tableau HTML héritent de la valeur par défaut pour aligner les attributs de ses lignes de tableau parent et enfant. Il affiche également la valeur par défaut pour utiliser les attributs valign dans le tableau HTML externe à l'aide de |
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
