HTML表格属性了解即可

表格标签的使用(了解,以后都是css改变表格形式)

作用

用来给一堆数据来添加表格语义。当数据非常大时,表格这种展现形式被认为是最清晰的y一种展现形式。

格式:
<table>
    <tr>
        <td></td>
    </tr>
</table>
tr标签

代表整个表格中的一行数据,就是说一对tr标签是表格中的一行。

td标签

代表表格中一行中的一个单元格。

border边框属性

默认为0,边框厚度为0,看不见.

<table border="10">
宽度和高度属性

可以给table和td标签使用,tr不行

表格的高度和宽度默认按照内容尺寸自动调节,我们也可以通过手动设置table标签的height和width属性来调整

<table border="2" height="300px" width="500px">

如果我们修改td标签的height和width属性,只会修改当前单元格的宽度和高度,表格整体的高度和宽度不会改变。

水平对齐和垂直对齐的属性

其中水平对齐可以给table,td,tr标签使用,而垂直对齐属性只能给tr和td标签使用。

align属性(水平)
<table border="2" height="300px" width="500px" align="center">

table的align属性只能控制整个表格相对于浏览器的水平位置

<tr align="center">

tr的align属性只能控制某一行的数据相对于表格的水平位置

<td width="150px" height="50px" align="left">1.1.1</td>

td的align属性只能控制某一格数据相当于每一行的水平位置,优先于tr的属性

valign属性(垂直)
<tr align="center" valign="top">

设置某一行的所有单元格内容相当于该行的垂直位置

<td width="150px" height="50px" align="left" valign="bottom">1.1.1</td>

设置某一具体单元格内容的相对垂直位置,优先级高于tr标签

外边距和内边距属性

只能给table使用。

外边距cellspacing(单元格与单元格之间距离,默认值为2px)
<table border="2" height="300px" width="500px" align="center" cellspacing="10">
内边距cellpadding(单元格内容与单元格之间的间隙,默认值为1)
<table border="2" height="300px" width="500px" align="center" cellspacing="10" cellpadding="20">
bgcolor属性
<table border="2" height="300px" width="500px" align="center" cellspacing="10" cellpadding="20" bgcolor="aqua">

在table中就是设置整个表格背景颜色,在tr标签中就是设置某一行的背景颜色,td标签设置某一格的背景颜色。table<tr<td优先级

猜你喜欢

转载自blog.csdn.net/LIUCHUANQI12345/article/details/109012087