HTML---表格标签

表格标签格式

在过去表格标签使用的非常多,绝大多数表格都是使用表格标签来制作的,也就是说,表格标签是一个时代的代表。
表格标签
作用:用来给一堆数据添加表格语义其实表格是一种数据的展现形式,当数据量非常大的时候,表格是最好的显示方法。


表格标签有一个边框属性,这个属性决定了边框的宽度,默认情况下,这个属性的值是0,所以看不到边框。
表格标签和列表标签一样,他是一个组合标签,所以,table/td/tr不会单独出现


 <table>(<table border=”1”>有表格边框)

<caption>..........</caption>

    <tr>
       <td> ........</td>
       <td>........</td>
       .......  
    </tr>
    ...........
    </table>

1.caption标题标签

<caption>标题文本</caption>(标题标签)

caption标签注意事项:

<capiton>.....</caption>一定要写在<table>.....</table>标签里面,否者无效。

<capiton>.....</caption>一定要紧跟在<table>.....</table>标签后面。

③标题只要写在<capiton>.....</caption>之中,就一定居中于表格标签。


2.table标签

①表格标签以<table>.....</table>以此开头,以此结尾。
②table表格在没有添加css样式之前,在浏览器中显示没表格线


3.tr标签
<tr>....</tr>表格的一行数据,有几对tr表格有几行


4.th标签

<th>.......</th> 表格头部的一个单元格,即表格表头默认加粗居中(注意是最靠右上角)


5.td标签
一对<td>代表表格中一行数据中一个单元格,也就是一列


宽度,高度
可以给table标签和td标签使用
1.1表格的宽度和高度默认是按照内容的尺寸来调整的
也可以通过给table标签设置width/height(例如:width/height=”100px”)属性的方式来手动制定表格的宽度和高度
1.2如果给td标签设置width/height属性,会修改当前单元格的宽度和高度不会改变大表格的长宽


水平对齐,垂直对齐的属性
其中,水平对齐可以给table标签和tr标签td标签使用
垂直对齐只能给tr标签和td标签使用
2.1给table标签设置align属性,可以控制表格在水平方向的对齐方式
2.2给tr标签设置align属性,可以控制当前行当中所有单元格内容的水平方向的对齐方式
2.3给td标签设置align属性,可以控制当前单元格中的内容在水平方向的对齐方式
Ps:如果td标签和tr标签都设置了align属性,那么单元格中的内容会按照td中设置的来对齐
2.4给tr标签设置valign属性(top center bottom)可以控制当前单元格中内容在水平方向的对齐方式
2.5给td标签设置valign属性可以控制当前单元格中的内容在垂直方向的对齐方式。
Ps:如果td、tr中都设置了valign属性,那么单元格中的内容会按照td中设置的来对齐


外边距,内边距。
只能给table标签使用
外边距就是单元格和单元格之间的距离,我们称之为外边距
例如cellspacing=“2px”默认为1
内边距就是单元格的边框和文字之间的间隙,我们称之为内边距。
例如cellpading=”2px”默认为1
在企业开发中这些都可以用css来改变。

猜你喜欢

转载自blog.csdn.net/AsukaShin/article/details/82990121