Maison >interface Web >tutoriel HTML >Application simple du tableau HTML

Application simple du tableau HTML

迷茫
迷茫original
2017-01-17 10:41:141618parcourir

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>

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>

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 !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn