- Web开发技术:HTML、CSS、JavaScript
- 赵振
- 310字
- 2021-04-02 20:21:05
3.1 HTML5表格简介
表格在网页布局中非常常用,可以让网页以行、列的方式承载数据,表格布局实现如图3-1、图3-2所示。
![](https://epubservercos.yuewen.com/9BA8D0/16948916504923706/epubprivate/OEBPS/Images/a-0136.jpg?sign=1739186444-SO6c77QUm0ogT9pWu1akvZdX8i3UH1wM-0-48337aa03866ac976ebede3f97ea2602)
图3-1 表格常用布局示例(一)
![](https://epubservercos.yuewen.com/9BA8D0/16948916504923706/epubprivate/OEBPS/Images/a-0137.jpg?sign=1739186444-vMEwsOa4EqqbMTtIX3Boz0gdqgNImtAA-0-009f9db654cddc758a969b3f037de735)
图3-2 表格常用布局示例(二)
3.1.1 表格的基本结构
表格的基本结构由行列组成,单元格是表格的最基本单位。表格的基本结构示意图如图3-3所示。
![](https://epubservercos.yuewen.com/9BA8D0/16948916504923706/epubprivate/OEBPS/Images/a-0138.jpg?sign=1739186444-OUYYkue0IW5emsRMKdeRnD5vjE8HUr41-0-c8895db8e50d88306255e2b506a2dc4e)
图3-3 表格的基本结构
3.1.2 表格的定义
表格由<table>标签定义。每个表格均有若干行,行由<tr>标签定义,每行被分割为若干单元格,列由<td>标签定义。字母td指表格数据(table data),即数据单元格的内容。如果表格的第一行为表头,那么<td>标签需要用<th>标签替换掉。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
基本语法如下:
![](https://epubservercos.yuewen.com/9BA8D0/16948916504923706/epubprivate/OEBPS/Images/a-0139.jpg?sign=1739186444-qImWk81IhWiuxl8gIEW3gd5u5oNfz5YT-0-e6d62e334a101572abf85d7df5f459de)
表格的显示效果如图3-4所示。
![](https://epubservercos.yuewen.com/9BA8D0/16948916504923706/epubprivate/OEBPS/Images/a-0141.jpg?sign=1739186444-NNLkG5zVb3fsIzmBYbsDOh5v4eryjnee-0-1efe9915fe6fbbbd742ca11e76398fc3)
图3-4 表格的显示效果