“这是我参与8月更文挑战的第8天,活动详情查看: 8月更文挑战”
想想我们平时自己画表格怎么来画,是不是先画一个框,然后画每一行,最后来画单元格。 那HTML的表格是怎么画的呢,同样也是这样画的,下面我们就来一步步学习,怎么用HTML来画一个表格。
<table>
标签
<table></table>
标签用来定义表格,也就是外面的大框框。
属性 值 描述
align left center right HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x) #xxxxxx colorname HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border 1 "" 规定表格单元是否拥有边框。
cellpadding pixels HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing pixels HTML5 不支持。规定单元格之间的空白。
frame void above below hsides lhs rhs vsides box border HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules none groups rows cols all HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary text HTML5 不支持。规定表格的摘要。
width pixels % HTML5 不支持。规定表格的宽度。
<tr>
标签
<tr>
标签定义HTML表格中的一行单元格,它应该是成对出现的。
属性 值 描述
align right left center justify char HTML5 不支持。定义表格行的内容对齐方式。
bgcolor rgb(x,x,x) #xxxxxx colorname HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
char character HTML5 不支持。规定根据哪个字符来进行文本对齐。
charoff number HTML5 不支持。规定第一个对齐字符的偏移量。
valign top middle bottom baseline HTML5 不支持。规定表格行中内容的垂直对齐方式。
<td>
标签
<td>
标签定义 HTML 表格中的标准单元格。
属性 值 描述
align left right center justify char HTML5 不支持。规定单元格内容的水平对齐方式。
bgcolor rgb(x,x,x) #xxxxxx colorname HTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。
char character HTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoff number HTML5 不支持。规定对齐字符的偏移量。
colspan number 规定单元格可横跨的列数。
headers header_id 规定与单元格相关联的一个或多个表头单元格。
height pixels % HTML5 不支持。HTML 4.01 已废弃。 设置单元格的高度。
nowrap nowrap HTML5 不支持。HTML 4.01 已废弃。 规定单元格中的内容是否折行。
rowspan number 设置单元格可横跨的行数。
scope col colgroup row rowgroup HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valign top middle bottom baseline HTML5 不支持。规定单元格内容的垂直排列方式。
width pixels % HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。
如果你需要将内容横跨多个行或列,那就使用 colspan 和 rowspan 属性。
<th>
标签
<th>
标签表示HTML表格的表头部分,该标签中的内容会以粗体显示。
<th>``<td>
标签都是单元格标签,
<th>
表头单元格 - 包含头部信息,元素中的文本通常呈现为粗体并且居中。<td>
标准单元格 - 包含数据,元素中的文本通常是普通的左对齐文本。
属性 值 描述
align left right center justify char HTML5 不支持。 规定表头单元格内容的水平对齐方式。
bgcolor rgb(x,x,x) #xxxxxx colorname HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。
char character HTML5 不支持。 规定根据哪个字符来进行内容的对齐。
charoff number HTML5 不支持。 规定对齐字符的偏移量。
colspan number 规定表头单元格可横跨的列数。
headers header_id 规定与表头单元格相关联的一个或多个表头单元格。
height pixels % HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。
nowrap nowrap HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。
rowspan number 规定表头单元格可横跨的行数。
scope col colgroup row rowgroup 规定表头单元格是否是行、列、行组或列组的头部。
valign top middle bottom baseline HTML5 不支持。 规定表头单元格内容的垂直排列方式。
width pixels % HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。
来看一下一个简单的实例:
<table border="1">
<th colspan="4">学生成绩表</th>
<tr>
<td>学号</td>
<td>数学成绩</td>
<td>语文成绩</td>
<td>英语成绩</td>
</tr>
<tr>
<td>1</td>
<td>95</td>
<td>88</td>
<td>79</td>
</tr>
<tr>
<td>2</td>
<td>92</td>
<td>85</td>
<td>88</td>
</tr>
</table>