HTML表格

初学HTML，把一些在菜鸟教程学习过程中值得记下的笔记总结一下，便于掌握表格知识，也方便后期的学习。

简单总结下表格结构语义标签：

•  1.<table>：表格根元素。
•  2.<thead>：表格头。
•  3.<tbody>：表格体。
•  4.<tfoot>：表格尾，一般可忽略该结构。
•  5.<tr>：表格行。

表格内容标签：

•  1.<th>：表头单元格。
•  2.<td>：表体单元格。

跨列：colspan

跨行：rowspan

单元格内边距：cellpadding

单元格外边距：cellspacing

col 和 colgroup 用于便捷定义表格指定列的样式。

 

表格三要素 table、tr、td 缺一不可。

<table> 标签常用属性：

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

<td>、<th> 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top)

三要素的形象图如下：

 

 

 

•  thead ---------表格的页眉
•  tbody ---------表格的主体
•  tfoot ---------定义表格的页脚

　　thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。

　　下面是网友总结的图：

 

 

 

 

注：编写过程中如有侵犯作者原创之处，请联系删除修改。同时欢迎友善批评指正，共同进步！