HTML表格

表格
(一)、表格语义记忆
通过语义化记忆表格标签:

表1 表格基本标签
标签    语义                                            说明
table    table(表格)                            表格
tr          table row(表格行)                  行
td         table data cell(表格单元格)   单元格
表2 表格结构标签
标签      语义             说明
thead    table head    表头
tbody    table body     表身
tfoot      table foot       表脚
th         table header   表头单元格
(二)、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签,其他标题标签<caption>、表头单元格<th>可以没有,但是这3者必须要有。

语法:

<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

</table>

说明:

<table>和</table>标记着表格的开始和结束,<tr>和</tr>标记着行的开始和结束,在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。

(三)、表格完整结构
表格完整结构应该包括表格标题(caption)、表头(thead)、表身(tbody)和表脚(tfoot)4部分。

表格语义化之后,使得代码更清晰和更利于后期维护。

语法:

 

<table>

<caption>表格标题</caption>

<!--表头-->

<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>

<!--表身-->

<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>

<!--表脚-->

<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table>

说明:

<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格,th表示表身单元格。每一对“<tr></tr>”表示一行。

(四)、合并行和合并列
合并行使用td标签的rowspan属性,而合并列则用到td标签的colspan属性。

(1)、合并行

语法:

<td rowspan="跨度的行数">

举例:

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>合并行rowspan</title>

</head>

<body>

<table>

<!--第1行-->

<tr>

<td>姓名:</td>

<td>小明</td>

</tr>

<!--第2行-->

<tr>

<td rowspan="2">喜欢水果:</td>

<td>苹果</td>

</tr>

<!--第3行-->

<tr>

<td>香蕉</td>

</tr>

</table>

</body>

</html>

在浏览器预览效果如下:

 

(2)、合并列

语法:

<td colspan="跨度的列数">

举例:

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>合并列colspan</title>

</head>

<body>

<table>

<!--第1行-->

<tr>

<td colspan="2">绿叶学习网精品教程</td>

</tr>

<!--第2行-->

<tr>

<td>HTML教程</td>

<td>CSS教程</td>

</tr>

<!--第3行-->

<tr>

<td>jQuery教程</td>

<td>SEO教程</td>

</tr>

</table>

</body>

</html>

posted @   STDU_DREAM  阅读(112)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示