Tableau vertical HTML

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.

Comment créer un tableau vertical en HTML ?

En général, nous devons créer un tableau à l'aide de

,, spécifie les lignes, balise, même parfois la balise body n'est pas non plus utilisée, et cette valeur de temps est au milieu, donc si le contenu bloqué à l'intérieur de la cellule du tableau HTML externe sera automatiquement aligné au centre verticalement dans la zone des navigateurs Web.

En utilisant de la cellule du tableau HTML crée un bloc de contenu à l'intérieur centré horizontalement dans la zone des navigateurs Web, un tableau interne est un autre type de cellule du tableau HTML qui constitue une boîte de la taille donnée, comme nous l'avons mentionné dans l'exemple d'image précédent. affiché dans certaines limites, certains navigateurs n'accepteront pas l'orientation de l'image dans la page elle-même.

Si nous utilisons le tableau interne pour HTML, c'est celui à l'intérieur des cellules externes du tableau HTML. Il ne peut pas définir la hauteur et la largeur des tables. Ensuite, la taille est ajustée automatiquement pour s'adapter au contenu, quelles que soient les dimensions définies. Si la largeur et la hauteur sont grandes, cela signifie que les zones du navigateur Web seront automatiquement affichées au centre.

Dans l'exemple ci-dessus, parfois  la balise afin qu'il n'affiche pas l'image dans IE version 3. Même si nous définissons également la compatibilité du navigateur dans les tableaux HTML.

Conclusion

Dans les tableaux HTML, nous avons organisé les données, et nous savons comment organiser sémantiquement les données tabulaires dans le HTML et également prendre des initiatives avec les styles CSS. Nous utilisons également des fonctions bootstrap, des bibliothèques Jquery utilisant Javascript pour mettre en évidence et modifier l'ordre des tableaux. Si nous devons utiliser les plugins Jquery, il possède de nombreuses fonctionnalités avancées pour les tableaux, comme si vous placez le curseur dans les cellules du tableau, il mettra automatiquement en évidence les couleurs. De même, si nous utilisons des concepts avancés, cela peut varier les formats de tableau et aligner les données.

,

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#1

Code :

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>

Name:	Sivaraman
Mobile:	123456789

 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°2

Code :

<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>

ID	Name	Age
1	Siva	30
2	Raman	29
3	Sivaraman	31

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 #3

Code :

<style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th,  td { display: block; }
</style>

Name

Number

Age

ID

 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 sections

Nous 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.

IT

Name	Age	Number
Sivaraman	30	8220244056
Raman	31	123456789

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 :

<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>

</center>
</center>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!