表格标签的基本使用
- 概念:表格标签是用来给一堆数据添加表格语义。其实表格是一种数据的展现形式,数据量很大时,表格是一种最为清晰的展现形式。之前常用,现在已被
div
标签取代。 - 格式:
<table><tr><td></td></tr></table>
。其中,table
代表一个表格;tr
代表整个表格中的一行数据;td
代表表格中某一行中的某一个单元。 - 注意:表格标签有个边框属性
border
,这个属性决定了边框的宽度,在默认情况下这个属性的值为0,所以看不到边框,若想显示边框需自己设置该属性。 - 代码示例:
<table border="1">
<tr>
<td>
此处添加表格单元格中的内容
</td>
</tr>
</table>
-
tr
与td
组合出现,是好基友。
表格标签的属性
- 宽度和高度的属性:可以给
table
标签和td
标签使用。
—>表格的宽度和高度默认是按照内容的尺寸来调整的,可以通过给table
标签设置width
属性和height
属性来设置表格的宽度和高度。
—>如果给td
标签设置width
和height
属性,会影响当前单元格的宽度和高度,不会影响整个表格总共的宽度和高度,但是会影响与之相邻的行或列的宽或高。 - 水平对齐和垂直对齐的属性:水平对齐可以给
table
标签和tr
标签和td
标签使用;垂直对齐可以给tr
标签和td
标签使用。
—>align
属性:left
,center
,right
;
—>valign
属性:top
,center
,bottom
;
—>给table
设置align
属性可以控制表格在水平方向对齐方式;
—>给tr
设置align
属性可以控制表格当前行中的单元的水平方向对齐方式;
—>给td
设置align
属性可以控制当前单元格中的内容的水平方向对齐方式。老大;
—>给tr
设置valign
属性可以控制当前行的垂直方向对齐方式;
—>给td
设置valign
属性可以控制当前单元格中的内容的垂直方向对齐方式。老大; - 外边距和内边距的属性:只能给
table
标签使用。
—>外边距:单元格与单元格之间的距离。cellspacing
默认值是2;
—>内边距:单元格的边框和格内文字的距离。cellpadding
默认值是1; - 示例代码:
<table border="1" width="500px" height="300px">
<tr valign="top或center或bottom">
<td width="100px" height="50px"></td>
<td></td>
</tr>
<tr align="left或center或right">
<td></td>
<td></td>
</tr>
</table>
细线表格
- 吐槽:在表格标签中想通过制定外边距为0的方式来实现细线表格太扯,其实它是将2条线合并为一条线,所以看上去不舒服。
- 细线表格真正的设置方式是通过
bgcolor
背景颜色+cellspacing
外边距来设置的。步骤:给table
标签设置bgcolor="black"
;给tr
标签设置bgcolor="white"
属性;给table
标签设置cellspacing="1px"
属性。 - 如下代码示例:
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
表格中的其他标签
- 表格标题:在表格标签中提供了一个标签专门用来设置表格的标题,即
<caption></caption>
,需要将caption标签放在table之下。
—>
<table bgcolor="black" cellspacing="1px" width="800px">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<td>排名</td>
<td>关键字</td>
<td>趋势</td>
<td>今日搜索</td>
<td>最近七日</td>
<td>相关链接</td>
</tr>
</table>
- 标题单元格标签:在表格标签中提供了一个标签专门用来存储每一列的标题,即
th
标签,只要将当前列的标题存储在这个标签中,文字便会自动居中并且加粗。
—>
<table bgcolor="black" cellspacing="1px" width="800px">
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr bgcolor="#a9a9a9">
<th>排名</th>
<th>关键字</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</table>
- 总之,表格中有两种单元格,一种是td(存储数据),一种是th(存储当前列的标题)。
- (了解)表格格式的代码示例:
—>
<table>
<caption>
指定表格的标题
</caption>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
--->caption:指定表格的标题;
--->thead:指定表格的表头信息;
--->tbody:指定表格的主体信息;
--->tfoot:指定表格的附加信息;
表格合并
- 水平方向上的单元格合并:
—>可以给td标签添加一个colspan
属性,来指定在水平方向把某一个单元格当作多个单元格。
—>例如:<td colspan="2"></td>
:将当前单元格看作两个单元格,相当于两个单元格的大小。
—>注意:由于把某一个单元格当作了多个单元格来看,所以就多出来一些单元格,所以需要删掉一些单元格才能正常显示。 - 垂直方向上的单元格合并
—>可以给td标签添加一个rowspan
属性,来指定在垂直方向把某一个单元格当作多个单元格。
—>例如:<td rowspan="2">
以上所有内容了解一下就行,以后在企业开发中所有控制样式都是通过css!