HTML5 表格

HTML5 表格

1、表格<table></table>
2、表行<tr></tr>
3、单元格<td></td>

属性:

标签 属性 取值 说明
<table></table> border 数字 设置表格边框的宽度,以px为单位
width
数字 设置表格的宽度,以px为单位
height
数字 设置表格的高度,以px为单位
align
left,right,center 设置表格在父元素中的水平对齐方式
cellpadding 数字 设置单元格内边距,以px为单位
cellspacing 数字 设置单元格外边距,以px为单位
默认为1,一般设置为0
<tr></tr> align
left,right,center 设置当前行文本的水平对齐方式,默认left
valign top,bottom,middle 设置当前行文本的垂直对齐方式,默认middle
bgcolor red,blue... 设置当前行的背景颜色
<td></td> width
数字 设置当前单元格宽度,以px为单位
height 数字 设置当前单元格高度,以px为单位
bgcolor red,blue... 设置当前单元格的背景颜色
align
left,right,center 设置当前单元格文本水平对齐方式,默认left
valign top,bottom,middle 设置当前单元格文本垂直对齐方式,默认middle
bgcolor red,blue... 设置当前单元格的背景颜色
colspan 数字 跨列合并单元格
rowspan 数字 跨行合并单元格

4、行分组
表头行分组 <thead></thead>
表尾行分组<tfoot></tfoot>
表主体行分组<tbody></tbody>

<table border="1" width="400" align="center" cellpadding="5" cellspacing="0">
    <thead bgcolor="blue" align="center">
        <tr>
            <td colspan="3">图书</td>
        </tr>
    </thead>
    <tbody bgcolor="yellow" align="center">
        <tr>
            <td rowspan="2">信息</td>
            <td>书名:</td>
            <td>python</td>
        </tr>
        <tr>
            <td>作者:</td>
            <td>山姆</td>
        </tr>
    </tbody>
    <tfoot align="center">
        <tr>
            <td colspan="2">价格:</td>
            <td>28.5</td>
        </tr>
    </tfoot>
</table>

猜你喜欢

转载自blog.csdn.net/weixin_43883022/article/details/88573686