表格table

表格table

可以用table标签和tr标签和td标签创建一个简单的表格。

width、height、border属性分别设置表格或单元格的宽度、高度、边框，但我们一般用CSS来设置它们。

改变一个td的宽度会影响整列的宽度。

单元格	单元格	单元格	单元格
单元格	变宽度	单元格	单元格
单元格	单元格	单元格	单元格

改变一个td的高度会影响整列的高度。

单元格	单元格	单元格	单元格
单元格	变高度	单元格	单元格
单元格	单元格	单元格	单元格

用th代替td来定义表格的表头

表头	表头	表头	表头
单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格

表头	单元格	单元格	单元格
表头	单元格	单元格	单元格
表头	单元格	单元格	单元格
表头	单元格	单元格	单元格

有些浏览器无法显示没有内容的单元格的边框，我们可以在这个空单元格中放一个 来占位，这样这个单元格的边框就显示出来了。
可以用caption标签为表格添加一个标题，可以为其设置align="bottom"来将标题设置到表的下方

表格标题

表头	表头	表头	表头
单元格	单元格	单元格	单元格
单元格		单元格	单元格
单元格	单元格	单元格	单元格

如果要为一个单元格设置跨两列，可以为要跨两列的单元格设置colspan属性。设置跨两列colspan="2"所在单元格的那一行最右边会被挤出来一个单元格，把挤出来的单元格删除即可。

单元格	单元格	单元格	单元格
单元格	单元格		单元格
单元格	单元格	单元格	单元格

跨两行rowspan="2"的单元格所在行的下一行最右边会被挤出来一个单元格，把挤出来的单元格删除即可。

单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格
单元格		单元格	单元格
单元格	单元格	单元格	单元格

cellpadding="10"改变单元格内的文字与单元格边框之间的间距，cellspacing="10"改变各个单元格边框之间的间距。

要改变一行的样式，直接设置行的tr就行了，但要改变一列的样式，就要使用colgroup标签对或col标签对。
colgroup标签为列设置样式(颜色，靠左中右上中下)。
为colgroup设置背景色，然后为colgroup添加span="2"，前两列的背景色就被改变了，span的值是列数（默认值1），不是第几列。

单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格

如果要单独改变第三列的样式，colgroup就做不到了，要用col标签。
添加一个col标签设置span="2"来占2列的位置，再添加一个col标签设置样式然后设置span="1"，第三列的样式就变了。

单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格

单元格内还可以嵌套其他的html标签，比如a、span、table、input、form、table......

转载于:https://www.cnblogs.com/luzhongwei/p/8534665.html