HTML中的表格

目录

1、表的基本语法

2、单元格合并

3、th标签

4、thead、tbody、tfoot标签

---

1、表的基本语法

<table  border="像素"  width="像素/百分比"  height='200px'   align='center'>   

  <!--border边框的宽度，width表的宽度，align表的对齐方式-->

    <tr align='center'>    <!--行，align行的对齐方式--> 

        <td align='center'></td>    <!--列，align列的对齐方式-->

        <td></td>

    </tr>

    <tr>    <!--行-->

        <td></td>

        <td></td>

    </tr>

</table>

2、单元格合并

列合并  cospan='合并的列数'

行合并  rowspan='合并的的行数'

<table border="1px">

    <tr>

        <td>1</td>

        <td colspan="2">xy</td>

    </tr>

    <tr>

        <td>1</td>

        <td>1</td>

        <td rowspan="2">KINGford</td>

    </tr>

    <tr>

        <td>1</td>

        <td>1</td>

    </tr>

</table>

效果如下：

3、th标签

作用：被th修饰的标签会自动加粗居中

<table border = "1px" width="50%">

    <tr>

        <th>员工编号</th>

        <th>员工姓名</th>

        <th>员工薪资</th>

    </tr>

    <tr>

        <td>7369</td>

        <td>SMITH</td>

        <td>800.0</td>

    </tr>

    <tr>

        <td>7370</td>

        <td>KING</td>

        <td>8000.0</td>
    
    </tr>

</table>

效果如下：

4、thead、tbody、tfoot标签

这三个标签是为了方便JavaScript的使用，它们将表格分成三部分。

<table border = "1px" width="50%">

    <thead>

        <tr>

            <th>员工编号</th>

            <th>员工姓名</th>

            <th>员工薪资</th>

        </tr>

    </thead>



    <tbody>

        <tr>

            <td>7369</td>

            <td>SMITH</td>

            <td>800.0</td>

        </tr>

    </tbody>



    <tfoot>

        <tr>

            <td>7370</td>

            <td>KING</td>

            <td>8000.0</td>
        
        </tr>

    </tfoot>

</table>