Explication détaillée du tableau en HTML

Cet article présente principalement des tableaux en HTML. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Tableau ordinaire, un simple tableau HTML se compose d'un élément de tableau et d'éléments tr, td et th, où tr fait référence à la ligne du tableau, td fait référence à la cellule et th définit le tableau en-tête. Laissez simplement les cellules vides vides ou utilisez  .

<table>	
<tr>		
<th>表头</th>		
<th>表头</th>		
<th>表头</th>	
</tr>	
<tr>		
<td>单元格1
</td>		
<td></td>		
<td>单元格3</td>	
</tr>	
</table>

2. Tableau avec bordures. L'élément border représente la bordure du tableau. L'unité par défaut est px. Cellspcing représente l'espacement entre les tableaux. Cellpadding représente la marge intérieure/distance de remplissage.

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

3. Tableaux avec des images ou des couleurs d'arrière-plan Remarque : bgcolor représente la couleur, et l'arrière-plan ne peut pas ajouter directement de la couleur en HTML (cette phrase je suis). faux, ce n'est pas la bonne façon de l'utiliser. Le format d'écriture utilisant directement le style en ligne est style="background:red" ou style="background-color:red"). L'ajouter au tableau signifie définir le tableau entier. Définir dans un tr ou un td séparé signifie définir une ligne ou une cellule distincte.

<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

4. Pour les tableaux qui s'étendent sur des lignes et des colonnes, rowspan signifie à travers les lignes et colspan signifie à travers les lignes. across columns , s'il s'étend sur plusieurs colonnes, il sera supprimé dans la ligne actuelle du tableau, s'il s'étend sur plusieurs lignes, il sera supprimé dans la ligne du tableau ci-dessous.

<table border="1">
	<caption>跨行</caption>
		<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>

<table border="1">
	<caption>跨列</caption>
		<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>

5. Un tableau avec un titre représente le titre du tableau. Vous pouvez également utiliser d'autres balises telles que les balises p pour localiser le titre du tableau, mais l'avantage d'utiliser la légende. c'est qu'il suivra le tableau Go, la valeur par défaut est de l'aligner avec le centre du tableau.

6. Organisez le contenu dans les cellules du tableau, par exemple en ajoutant des paragraphes, des listes, etc.

<table border="1">
	<tr>
		<td>
			<p>这是一个段落，hello World！</p>
		</td>
		<td>
			<ul>
				<li>这是一个列表
					<ul>
						<li>html</li>
						<li>css</li>
						<li>javascript</li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>

Attribut de cadre 7.frame, spécifie quelle partie de la bordure extérieure est visible. //Ne sera pas utilisé pour le moment.

Recommandations associées :

Mise en œuvre de la barre de défilement du tableau des pages HTML

Explication détaillée de la méthode d'extension ElTableColumn

Opérations associées à l'instruction SQL ALTER TABLE

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!