在中，咱们制做了一个网上选课单。
固然表格，在H5的期间，有些日渐傍晚的感到
不过在解决繁杂的数据显示方面，表格仍旧是最好的解毒良药！
咱们经过创造一个简洁的消息表单，来熟悉tabel的玩儿法。
table
先用table制做下小我消息，就用小团鱼老湿和俺的吧
table的border属性用来配置表格宽度。
tr，代表一行表格。
td，代表单位格。
代码以下：
metacharset="utf-8"
tableborder="1"
tr
td小团鱼老湿:/td
td28/td
/tr
tr
td不贰如是:/td
td18/td
/tr
/table
结果图：
colspancaptionth
表格最根底部份是有了，不过还差点甚么的赶足？
对了，即是表头
咋办捏，很简洁，两个措施：
1.配置td的colspan属性
colspan的值，即是归并几个单位格的事理，由于本例中惟有两列。
是以colspan="2"
2.caption题目(表非常题目)元素
caption标签必需紧随table标签以后。
并且一个表格只可界说一个题目
时常这个题目会被居中于表格之上。
尔后欺诈th元素把二级题目加粗，默许欣赏器下，th中的文字会被加粗。
1，代码以下：
metacharset="utf-8"
tableborder="1"
tr
tdcolspan="2"鱼C消息表/td
/tr
tr
td小团鱼老湿:/td
td28/td
/tr
tr
td不贰如是:/td
td18/td
/tr
/table
结果图：
2，接续增加，姓名、年岁表头，代码以下：
metacharset="utf-8"
tableborder="1"
tr
tdcolspan="2"鱼C消息表/td
/tr
caption鱼C消息表/caption
tr
th姓名/th
th年岁/th
/tr
tr
td小团鱼老湿:/td
td28/td
/tr
tr
td不贰如是:/td
td18/td
/tr
/table
结果图：
theadtbody
为了，彰显表头和表格主旨越发明显。每每插足thead、tbody元素。
这哥俩儿，就像区块相同，不过说话上的布局化，升高代码强壮性。
结果不会有任何变动，代码以下：
metacharset="utf-8"
tableborder="1"
thead
tr
tdcolspan="2"鱼C消息表/td
/tr
caption鱼C消息表/caption
tr
th姓名/th
th年岁/th
/tr
/thead
tbody
tr
td小团鱼老湿:/td
td28/td
/tr
tr
td不贰如是:/td
td18/td
/tr
/tbody
/table
colorgroup
末了即是对表非常观，举行粉饰！
架构有了后，须要调动外貌，像表格的对其方法、布风景、前程色、宽度等等形式。
而像字体居中，只要要在thead、tbody全面配置就好，不必一个一个标签去改！
颜色我小我对比爱好css全面配置，固然有非常须要，能够自力标签去配置。
代码以下：
metacharset="utf-8"
styletype="text/css"
thead{color:green}
tbody{color:blue;height:50px}
/style
tableborder="16"width="66%"align="center"
theadalign="center"
tr
tdcolspan="2"鱼C消息表/td
/tr
caption鱼C消息表/caption
tr
th姓名/th
th年岁/th
/tr
/thead
tbodyalign="center"
tr
td小团鱼老湿:/td
td28/td
/tr
tr
td不贰如是:/td
td18/td
/tr
/tbody
/table
结果图：
经过表头的颜色，咱们熟悉真实的表头惟有caption内的才是。
像归并单位格，不过表面像表头，但本质还是表格云尔哦～
END即使爱好本系列HTML帖子
欢送到鱼C论坛定阅专辑?
HTML5-伙头解牛
戳原文，更有料！预览时标签不成点收录于合集#个