html从入门到放弃(5)-表格 table

来源：互联网发布：淘宝没有销售属性编辑：程序博客网时间：2024/06/05 14:32

对于表格，使用table来声明，可以设置它的间隔背景颜色等等；table节点下依靠tr标签来实现一行行从上而下的显示；table标签之下使用th或者td来自左往右的显示，其中th标签的字是加粗的。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><!-- 使用方法：table标签标示这是一个表；caption标签表述这个表的名字；对于表每行每列标题的粗体显示，依靠于th标签；对于表内容的填充，使用一行一行的填充，即使用tr标签，一个tr表示一行，然后在tr标签内使用th或者td标签来表示这一行从左到右的数值信息 --><body background="/Practice_Project/test.jpg"><!-- 两行三列的表格，居中显示，不带边框 --><table   align="center" style="color: red;" bgcolor="yellow"><!-- 第一行，row --><tr><td>第一行第1列</td><td>第一行第2列</td><td>第一行第3列</td></tr><!-- 第二行，row --><tr><td>第二行第1列</td><td>第二行第2列</td><td>第二行第3列</td></tr></table><br /><!-- 两行三列的表格，居中显示(新方法)，带边框，添加表头 。--><!-- 设置边距使用cellpadding：表示一个表格内的文字距离边框的距离 --><!-- 设置间距使用cellspacing：表示两个表格之间的距离 --><!-- 对于表和表格的背景颜色设置方法如下： --><!-- 设置背景颜色使用bgcolor，设置背景图片使用background --><!-- 设置显示位置，居中还是左右 --><!-- 表可以使用：align或者下面的margin --><!-- 表格只能使用align --><table style="color: red; margin: 0px auto;" border="1" cellpadding="5" cellspacing="5"><!-- 加上一个标题吧 --><caption>统计表表名</caption><!-- 列标题，标题是加粗的，这也是th和td标签的区别之一--><tr><th>列1</th><th>列2</th><th>列3</th></tr><!-- 第一行，row 注意，为了使行名粗体，使用th标签写名称--><tr><th>第一行</th><td align="center">一行1列</td><td>第一行第2列</td></tr><!-- 第二行，row --><tr><th>第二行</th><td>第二行第1列</td><td>第二行第2列</td></tr><!-- 实现两行公用一个行名，列也类似，只是需要把rowspan换做colspan="1"--><tr><th rowspan="2">公用一个</th><td>第三行第1列</td><td>第三行第2列</td></tr><tr><td>第四行第1列</td><td>第四行第2列</td></tr><!-- 表的单个表格里面也可以包含一个表 --><tr><th>第五行</th><td>第五行第1列</td><td>第五行第2列： <!-- 内部包含的那个表 --><table style="color: blue; margin: 0px auto;" border="1"><caption style="font-size: 10px;">内部包含的表</caption><!-- 列名字 --><tr><th>头1</td><th>头1</td></tr><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td></td></tr></table></td></tr></table></body></html>

实际显示效果：

阅读全文

0 0