HTML学习 - 表格

<table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李三</td>
                <td>21</td>
                <td>男</td>
            </tr>
            <tr>
                <td>刘三</td>
                <td>55</td>
                <td>男</td>
            </tr>
        </table>

这边就是简单的显示一个表格，默认是没有边框线的。

表格标题和表头

<caption> 可以为表格添加一个标题

<th> 表示表头，会把字体加粗

表格的跨行跨列

            跨列：保留左边的td，删掉右边的td，让左边的td合并右边的td -》colspan="2" 合并2个

            跨行：保留上边的td，删掉下边的td，让下边的td合并下边的td -》rowspan="2" 合并2个

            先把所有的表格做好，然后在看要删掉那些

       <table border="1px" cellspacing="0" cellpadding="10px" align="center">
            <tr>
                <th>姓名</th>
                <th colspan="2">电话</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>123458797</td>
                <td>194830237</td>
            </tr>
            <tr>
                <td>李三</td>
                <td>123458797</td>
                <td>194830237</td>
            </tr>
        </table>

        <table border="1px" cellspacing="0" cellpadding="10px" align="center">
            <tr>
                <th>姓名</th>
                <td>张三</td>
                <td>李三</td>
            </tr>
            <tr>
                <th rowspan="2">电话</th>
                <td>123458797</td>
                <td>194830237</td>
            </tr>
            <tr>
                <td>123458797</td>
                <td>194830237</td>
            </tr>
        </table>