表格标签
目录
简介
在过去表格标签使用的非常多,绝大多数网站都是通过表格标签来制作的,表格标签是一个时代的代表,<table>
标签用来定义 HTML 表格,一个简单的 HTML 表格应该包括两行两列。
作用
表格标签是用来给一堆数据添加表格语义的,其实表格就是数据的一种展现形式,具有一定的规则。当数据量大的时候,表格这种展现形式被认为是最清晰的一种方式
格式
<table>
标签:一对<table>
标签就代表一个表格;<caption>
标签:一对<caption>
标签就代表着一个表格的标题;<tr>
标签:一对<tr>
标签就代表表格中的一行数据;<td>
标签:一对<td>
标签就代表表格中的一个单元格;<th>
标签:一对<th>
标签就代表表格中的一列列名。
<table>
<caption>This is the Title</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Month | Savings |
---|---|
January | $100 |
属性
- 边框宽度,border
- 宽度和高度,width&height
- 可以给
<table>
和<td>
标签使用
- 表格的宽高默认是以单元格内容来填充的,也可以给
<table>
标签指定height和width来手动设置 - 给
<td>
标签手动设置height和width,只会改变单元格的宽高,不会改变整个表格的宽高
- 表格的宽高默认是以单元格内容来填充的,也可以给
- 可以给
- 水平对齐和竖直对齐
- 水平对齐,align,居左,居中,居右
- 可以给
<table>
,<td>
,<tr>
标签使用; <table>
:控制表格在水平方向对齐方式;<td>
:控制单元格内容在水平方向对齐方式;<tr>
;控制一行单元格内容在水平方向对齐方式;
- 可以给
- 竖直对齐,valign,居上,居中,居下
- 只能给
<tr>
和<td>
标签使用; <td>
:控制单元格内容在竖直方向对齐方式;<tr>
;控制一行单元格内容在竖直方向对齐方式;
- 只能给
- 水平对齐,align,居左,居中,居右
- 外边距和内边距
- 只能给
<table>
标签使用,cellspacing默认为2px,cellpadding默认为1px; - 外边距,cellspacing,单元格与单元格之间的距离;
- 内边距,cellpadding,单元格边框与单元格内容之间的距离;
- 只能给
- 细线表格
- 设置表格背景色为黑色;
- 设置单元格背景色为白色;
- 设置表格的cellspacing=”1px”;
<table border="0" cellspacing="1px" bgcolor="black">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
单元格合并
- 水平方向的单元格合并
- 设置
colspan = "2"
,当前单元格被视为占两格(自左向右)
- 设置
- 竖直方向的单元格合并
- 设置
rowspan = "2"
,当前单元格被视为占两格(自上而下)
- 设置
<table bgcolor="black" align="center" width="500px" height="300px" cellspacing="1px">
<tr bgcolor="white">
<!--水平单元格合并1.1和1.2-->
<td colspan="2" bgcolor="black"></td>
<!--<td></td>-->
<td></td>
</tr>
<tr bgcolor="white">
<!--2*2单元格合并2.1,2.2,3.1,3.2-->
<td colspan="2" rowspan="2" bgcolor="lightblue"></td>
<!--竖直单元格合并2.3,3.3-->
<td rowspan="2" bgcolor="black"></td>
</tr>
<tr bgcolor="white"></tr>
</table>
注意点
<caption>
标签一定要写在<table>
标签的里面,且一定要紧跟<table>
标签;- 不要通过加粗和居中首对
<tr>
标签来实现<th>
标签的效果 - 表格标签有一个border属性,border属性决定了表格的边框宽度,默认为0,所以看不到边框;
- 如果
<td>
和<td>
标签中同时设置了对齐方式,则以<td>
标签中的对齐方式为准; - 在表格标签中单纯的设置cellspacing=”0”,来实现细线表格是不行的,这样做会把两条线重叠在一起;
- 由于表格中的数据比较复杂,为了方便管理和阅读,以及提升语义,可以对表格中的数据进行分类;完整的表格应当具有以下四个部分,如果没有写
<tbody>
的话浏览器会自动为我们添加;如果指定了<thead>
和<tbody>
,那么在修改整个表格的高度的时候,<thead>
和<tbody>
有自己的默认高度,不会随着表格高度的修改而变化
- 表格的标题:
<caption>
标签 - 表格的表头信息:
<thead>
标签 - 表格的主题信息:
<tbody>
标签 - 表格的页尾信息:
<tfoot>
标签
- 表格的标题:
- 单元格合并的时候设置colspan是自左向右,rowspan是自上而下,由于一个单元格被看做多个单元格,无论是自左向右还是自上而下,应该删除多余的单元格;
- 所有的控制样式仍然要通过css,不应该在标签中直接设置