Tutoriel d'apprentissage de base sur la balise table en HTML

Utiliser la balise table pour afficher le contenu d'un tableau sur le Web est l'une des fonctions les plus élémentaires du HTML. Nous allons jeter un œil ici au didacticiel d'apprentissage de base de la balise table en HTML. Les amis qui en ont besoin peuvent s'y référer.

La composition des balises du tableau
Le tableau en HTML se compose de

comme balise principale, et le navigateur interprétera la balise comme un tableau. Les lignes du tableau sont définies à l'aide de la balise La balise est une sous-classe de la balise . La définition de plusieurs balises La balise séparez les colonnes et formez un formulaire complet.
La relation de combinaison de balises du tableau est :

<table>  
<tr>  
<td>我是单元格1</td>  
<td>我是单元格2</td>  
</tr>  
</table>

Toutes les balises HTML telles que du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, etc. peuvent être insérées dans le tableau et peut même être utilisé pour la mise en page. Cependant, la disposition des tableaux présente des problèmes tels qu'une redondance de code trop longue, le non-respect des spécifications HTML et des moteurs de recherche peu conviviaux. Par conséquent, il est recommandé de ne pas utiliser de tableaux pour la mise en page, sauf si un tableau est réellement nécessaire sur la page.
Les éléments

, et sont rarement utilisés en raison de leur mauvaise prise en charge par le navigateur.

Attributs de tableau et de bordure
Le tableau lui-même peut définir l'attribut de bordure pour déterminer la largeur de la bordure du tableau. La valeur de cet attribut est affichée en unités numériques par défaut, par exemple. as border="1" La valeur est en px. Attention, n'ajoutez aucune unité après la valeur de bordure, sinon la valeur ne sera pas reconnue correctement.

En-tête du tableau
Dans

est utilisée pour définir les colonnes du tableau. La balise	est également une sous-classe de la balise
,

, vous pouvez définir l'en-tête du tableau via la balise Pour un tableau, l'en-tête n'est pas nécessaire et peut être inséré selon les besoins. Le texte contenu dans la balise

;tr> Il appartient au même niveau et l'en-tête apparaît généralement devant la balise

sera automatiquement mis en gras.

Fusion de cellules
La fusion de cellules est divisée en fusion verticale et fusion horizontale. Lors de la fusion, vous devez déterminer s'il existe un nombre correspondant de cellules dans d'autres lignes et colonnes. .
La fusion horizontale de cellules utilise l'attribut colspan, dont la valeur est un nombre qui détermine le nombre de cellules à fusionner. Par exemple, colspan="2" signifie fusionner deux cellules vers la droite.
La fusion verticale de cellules utilise l'attribut rowspan, qui est le même que l'attribut de fusion horizontale. Il détermine également le nombre de cellules à fusionner sous forme numérique. Par exemple, rowspan="2" signifie fusionner deux cellules vers le bas.
Exemple de code de démonstration :

<table border=“1”>  
<tr>  
<th>姓名</th>  
<th colspan=“2”>电话</th>  
</tr>  
<tr>  
<td>Bill Gates</td>  
<td>555 77 854</td>  
<td>555 77 855</td>  
</tr>  
</table><h4>横跨两行的单元格：</h4>  
<table border=“1”>  
<tr>  
<th>姓名</th>  
<td>Bill Gates</td>  
</tr>  
<tr>  
<th rowspan=“2”>电话</th>  
<td>555 77 854</td>  
</tr>  
<tr>  
<td>555 77 855</td>  
</tr>  
</table>

Exemple d'effet de démonstration :

Marge de cellule
Le tableau a une fonction de remplissage similaire au style de remplissage. En définissant l'attribut cellpadding dans la balise

, vous pouvez définir un remplissage pour tous les éléments

cellules Espacement des cellules
L'espacement entre les cellules consiste à définir la marge extérieure de la balise l'attribut cellpacing dans la balise

Le paramètre de l'attribut cellpadding est que la valeur est sous la forme d'un nombre pour déterminer la taille de la marge. Par exemple, cellpadding="10" signifie que la marge intérieure de toutes les étiquettes

, vous pouvez définir les marges de la balise . Cet attribut détermine également la taille des marges sous forme de nombres. Par exemple, Cellpacing="10" signifie que les marges de toutes les balises de ce tableau sont de 10px

Définissez la valeur. background for the table
Le tableau peut définir n'importe quelle image comme arrière-plan du tableau ou de la cellule via l'attribut background Son utilisation est très similaire à l'arrière-plan en CSS. Définissez le chemin de l'image correspondant pour l'arrière-plan afin que la cellule affiche l'image correspondante. Par exemple, background="table_bg.gif"

Alignement du contenu du tableau
L'alignement des tableaux est divisé en alignement horizontal et alignement vertical. Il s'agit respectivement de l'attribut align et de l'attribut valign. Insérez ces deux attributs dans la balise

correspondante pour terminer l'alignement du texte ou des images dans la cellule.
L'alignement horizontal a trois valeurs : gauche, centre et droite.
La valeur d'alignement vertical a également trois valeurs : haut, milieu, bas et ligne de base.
L'alignement de la ligne de base peut ne pas être compris littéralement. En fait, l'alignement de la ligne de base signifie que le texte apparaît dans la partie supérieure centrale du tableau plutôt qu'au centre. Si le texte n'est pas grand, l'effet est similaire à celui du milieu, légèrement plus haut que le milieu.

PS : L'instruction table-layout en CSS
peut être utilisée pour spécifier le style d'affichage du tableau, tel que

Code CSSCopier le contenu dans le presse-papiers

1. table { table-layout : fixe }

Il peut prendre trois valeurs :
* auto (par défaut)
* fixe
* hériter
auto signifie que la taille de la cellule est déterminée par le contenu. Fixe signifie que la taille de la cellule est fixe et est déterminée par la première cellule avec une taille spécifiée ; si toutes les cellules n'ont pas une taille spécifiée, elle est déterminée par la taille par défaut de la première cellule si le contenu de la cellule ; dépasse la cellule La taille de la grille est contrôlée par la commande overflow en CSS. Microsoft affirme qu'en utilisant cette commande, la vitesse d'affichage du tableau peut être accélérée de 100 fois.
D'ailleurs, afin d'accélérer l'affichage du tableau, il est préférable de spécifier à l'avance la largeur et la hauteur du tableau en CSS (ou les attributs width et height de la balise table).

Pour plus d'articles connexes sur le didacticiel d'apprentissage de base des balises de table en HTML, veuillez faire attention au site Web PHP chinois !