HTML 表格
表格由
每个表格均有若干行(由
标签定义),每行被分割为若干单元格(由 标签定义)字母 td 指表格数据(table data),即数据单元格的内容
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
HTML表格实例
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
在浏览器显示如下:
HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框
有时这很有用,但是大多数时候,我们希望显示边框
使用边框属性来显示一个带有边框的表格:
Row 1, cell 1 | Row 1, cell 2 |
HTML 表格表头
表格的表头使用
标签进行定义。大多数浏览器会把表头显示为粗体居中的文本:
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
在浏览器显示如下:
HTML 表格标签
标签
描述
定义表格
定义表格的表头
定义表格的行
定义表格单元
定义表格标题
定义表格列的组
定义用于表格列的属性
定义表格的页眉
定义表格的主体
定义表格的页脚
表格三要素 table、tr、td 缺一不可
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
标签的常用属性:bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
、 标签的常用属性:width="500" 单元格的宽度,设置后对当前一列的单元格都有影响
height="100" 单元格的高度,设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
注意:引号里的数字和颜色代码均可以根据需求进行更改
表格结构语义标签:
:表格头。
:表格体。:表格尾,一般可忽略该结构。:表格行。表格内容标签:
:表头单元格。:表体单元格。跨列:colspan
跨行:rowspan
单元格内边距:cellpadding
单元格外边距:cellspacing
col 和 colgroup 用于便捷定义表格指定列的样式