Application simple du tableau HTML-tutoriel HTML-php.cn

Application simple du tableau HTML

迷茫

Libérer： 2017-01-17 10:41:14

original

1547 Les gens l'ont consulté

Dans la mise en page Web précédente, nous utilisions des tableaux pour la mise en page, mais à mesure que le temps passe et que la langue progresse, notre utilisation des mises en page de tableaux devient de moins en moins fréquente. Désormais, la plupart des sites Web utilisent des div css. En matière de mise en page, les moteurs de recherche le sont. pas très convivial pour la disposition des tableaux. Lors de l'exploration du contenu d'un site Web, la disposition CSS div peut être mieux explorée par les moteurs de recherche. Parlons donc aujourd'hui de la disposition des tableaux.

Tout d'abord, il faut savoir quelles sont les étiquettes de la table ?

, ,

,	Écrivons un exemple ci-dessous, puis appliquons ces balises à l'exemple <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1"> <tr> <th>ID</th> <th>名称</th> <th>价格</th> <th>库存</th> <th>上线时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>相机</td> <td>1499</td> <td>999</td> <td>2015.6.8</td> <td>修改删除</td> </tr> </table> </body> </html> Copier après la connexion Le rendu est le suivant : Cet effet n'est pas très beau, continuons à améliorer le tableau Définir une largeur fixe et height , et la bordure, la bordure est une ligne continue <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ width: 500px; height:100px; text-align: center; } td{ width:90px; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th>ID</th> <th>名称</th> <th>价格</th> <th>库存</th> <th>上线时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>相机</td> <td>1499</td> <td>999</td> <td>2015.6.8</td> <td>修改删除</td> </tr> </table> </body> </html> Copier après la connexion Dans ce cas, le tableau sera bien meilleur. Bien sûr, nous y avons aussi des attributs, colspan. rowspan. Si vous créez un CV personnel, utilisez Pour la mise en page du tableau, nous utiliserons ces deux attributs pour fusionner des lignes et des cellules. Il existe des exemples de cela dans le cours d'introduction de base au HTML sur le site Web PHP Chinese Friends. savoir comment faire peut s'y référer !

Écrivons un exemple ci-dessous, puis appliquons ces balises à l'exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

Le rendu est le suivant :

Application simple du tableau HTML

Cet effet n'est pas très beau, continuons à améliorer le tableau

Définir une largeur fixe et height , et la bordure, la bordure est une ligne continue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
width: 500px;
height:100px;
text-align: center;
}
td{
width:90px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
<th>库存</th>
<th>上线时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>相机</td>
<td>1499</td>
<td>999</td>
<td>2015.6.8</td>
<td>修改 删除</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

Dans ce cas, le tableau sera bien meilleur. Bien sûr, nous y avons aussi des attributs,

colspan. rowspan. Si vous créez un CV personnel, utilisez Pour la mise en page du tableau, nous utiliserons ces deux attributs pour fusionner des lignes et des cellules. Il existe des exemples de cela dans le cours d'introduction de base au HTML sur le site Web PHP Chinese Friends. savoir comment faire peut s'y référer !