1. HTML表格 table 标签
表格由<table>标签定义。每个标签均有若干行,若干列,行由<tr>(table row)定义;列由<td>(table data, 即表格数据)定义,即表格单元格的内容;表头由<th>(table head)定义。
表格单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
标签 | 属性名 | 属性取值 | 属性描述 |
---|---|---|---|
table | border | 0、1~无穷 | 0表示边框宽度为无 |
bordercolor | "#000"~"#fff" | 边框颜色 | |
cellspacing | 0、1~无穷 | 单元格之间的距离 | |
cellpadding | 0~ | 单元格边距,即边框与文本之间的距离。 | |
width | 0~ | 表格的总宽度,单位是像素 | |
height | 0~ | 表格的总高度 | |
align | letf、center、right | 表格整体在整个网页中位置的对齐方式 | |
bgcolor | #000~#fff | 表格整体的背景色 | |
tr | bgcolor | #000~#fff | 行的颜色 |
align | left、right、center | 行内文字的水平对齐方式 | |
valign | top、middle、bottom | 行内文字的垂直对齐方式 | |
td、th | width | 0~,单位为像素 | 单元格的宽度,设置后对当前一列的单元格都有影响 |
height | 0~,单位为像素 | 单元格的高度,设置后对当前一行的单元格都有影响 | |
bgcolor | #000~#fff | 单元格的背景色 | |
align | left、center、right | 单元格文字的水平对齐方式 | |
rowspan | 1~ | 合并垂直方向的单元格 | |
colspan | 1~ | 合并水平方向单元格 | |
valign | middle、bottom、top | 单元格文字的垂直对齐方式 | |
HTML中的table可以分为三个部分thead:表格的页眉;tbody:表格的主体;tfoot:表格的页脚; |
<table border="5.5" bordercolor="#f00" bgcolor="#bbb" cellspacing="1" align="middle">
<caption>表格属性</caption>
<thead>
<tr bgcolor="#f00" align="center">
<th>标签</th><th>属性名</th><th>属性取值</th><th>属性描述</th>
</tr>
</thead>
<tbody>
<colgroup>
<col style="background-color: yellow">
<col span="3" style="background-color:green">
</colgroup>
<tr>
<th rowspan="8">table</th><td>border</td><td>0、1~无穷</td><td>0表示边框宽度为无</td>
</tr>
<tr>
<td>bordercolor</td><td>"#000"~"#fff"</td><td>边框颜色</td>
</tr>
<tr>
<td>cellspacing</td><td>0、1~无穷</td><td>