![Web前端学习笔记:HTML5+CSS3+JavaScript](https://wfqqreader-1252317822.image.myqcloud.com/cover/365/31304365/b_31304365.jpg)
上QQ阅读APP看书,第一时间看更新
3.1 HTML5表格简介
表格在网页布局中非常常用,可以让网页以行、列的方式承载数据,表格布局实现如图3-1、图3-2所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-66.jpg?sign=1739695661-3opX1yhMAMTl4dd7wxhtGjrBGfBUcpcT-0-6081f3ad554bba6bfb0605fc143311c6)
图3-1 表格常用布局示例(一)
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-67.jpg?sign=1739695661-zEzHhC87hSZfjThNUTGKXH2yriu8Kp4n-0-dfcc38e7bf82f7745c3f19d1356eff5f)
图3-2 表格常用布局示例(二)
3.1.1 表格的基本结构
表格的基本结构由行列组成,单元格是表格的最基本单位。表格的基本结构示意图如图3-3所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-68.jpg?sign=1739695661-o6qF0wz43lWgCZrnLHDyuIrN5WePNDke-0-6d1ac18dc1375207df26ecd939dcf2ea)
图3-3 表格的基本结构
3.1.2 表格的定义
表格由<table>标签定义。每个表格均有若干行,行由<tr>标签定义,每行被分割为若干单元格,列由<td>标签定义。字母td指表格数据(table data),即数据单元格的内容。如果表格的第一行为表头,那么<td>标签需要用<th>标签替换掉。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-69.jpg?sign=1739695661-OUsCFKYePCuvXyYV0WAho4jDpjtA9GSV-0-34b9211049f84d96a40bf76be0073281)
表格的显示效果如图3-4所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-70.jpg?sign=1739695661-zy8DM92enVZttAl6JG4lYfYpMjjsuV0J-0-9dc7c0cef5bc2a19f9bcf0c5483787ce)
图3-4 表格的显示效果