html表格table/tr/td及其属性

表格：行 列 单元格
表格：table
行：tr
列/单元格：td
语义化标签：thead tbody tfoot

 <!--vscode快捷键：table>tr*3>td{单元格}*3 构造3行3列的表格-->
 <table border= 1>

        <caption>表格名字</caption>  <!--表格名字标签，可写可不写-->

        <thead>  <!--表格的头部-->
            <th>姓名</th> 
             <!--表格头部的特殊单元格，默认有加粗效果-->
            <th>学校</th>
            <th>年龄</th>
        </thead>

        <tbody>  
        <!--tbody是一个语义化标签，没有任何作用，只是告诉你这部分是表格的身体-->
            <tr>  <!--第一行的三个单元格： 单元格1  单元格2  单元格3-->
                <td>单元格1</td>
                <td>单元格2</td>
                <td>单元格3</td>
            </tr>
            <tr> <!--第二行的三个单元格：单元格4 单元格5 单元格6-->
                <td>单元格4</td>
                <td>单元格5</td>
                <td>单元格6</td>
            </tr>
            <tr>
                <td>单元格7</td>
                <td>单元格8</td>
                <td>单元格9</td>
            </tr>
       </tbody>
       
        <tfoot> 
        <!--tfoot是语义化标签，没有任何作用，只是告诉你这部分是表格的底部-->
            <tr>
                <td>单元格10</td>
                <td>单元格11</td>
                <td>单元格12</td>
            </tr>
        </tfoot>
        
    </table>

属性：
表格属性：让表格更多样化、更美观
【 table属性：】
border————设置表格边框
width————设置表格宽度
height————设置表格高度
align————设置表格在网页中对齐方式，是在网页左边，网页中间，网页右边
bgcolor————设置表格背景颜色
bordercolor————设置边框线的颜色
background————设置背景图片
cellpadding————内容距离边框的距离
cellspacing————单元格之间的距离

【 tr的属性：】
height————设置一行的高度
bgcolor————设置一行的背景颜色
background————设置一行的背景图片
align————设置行内的内容水平对齐方式，取值left\center\right
valign————设置行内的内容垂直对齐方式，取值top\middle\bottom

【 td的属性：】
width————设置单元格宽度、同列等宽，就是设置任何一个单元格，整个一列的宽度都会变化
height————设置单元格高度、同行等高，就是设置任何一个单元格，整个一行的高度都会变化
align————设置单元格水平对齐方式
valign————设置单元格垂直对齐方式
bgcolor————设置单元格背景颜色
background————设置单元格的背景图片