HTML基础之表格

HTML基础之表格

话不多说直接上代码：
代码解释：
table:表格标签
broder:表格线宽
caption:表格标题
th:表头
tr：行标签
td：列标签
thead、tbody、tfood：对表格代码进行封装，实际表现效果加和不加都一样。

<table border="1">
        <caption> <strong>学生成绩单</strong> </caption>
        <thead>
            <tr>
                <th>科目</th>
                <th>学分</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C语言</td>
                <td>4</td>
                <td>96</td>
            </tr>
            <tr>
                <td>大学物理</td>
                <td>3</td>
                <td>83</td>
            </tr>
            <tr>
                <td>物理实验</td>
                <td>1</td>
                <td>90</td>
            </tr>
            <tr>
                <td>大学英语</td>
                <td>4</td>
                <td>81</td>
            </tr>
            <tr>
                <td>工程数学</td>
                <td>6</td>
                <td>90</td>
            </tr>
            <tr>
                <td>马克思主义基本原理</td>
                <td>3</td>
                <td>70</td>
            </tr>
            <tr>
                <td>形势与政策</td>
                <td>0</td>
                <td>90</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">大吉大利</td>
            </tr>
        </tfoot>
        
    </table>

运行样式：

合并单元格:
colspan:跨列成行
rowspan:跨行成列
使用的时候要删除掉那些要被合并掉得行和列，然后在左上方开始合并得第一个单元格进行设置，值为合并得行列个数。
同样代码合并如下：

<table border="1">
        <caption> <strong>学生成绩单</strong> </caption>
        <thead>
            <tr>
                <th>科目</th>
                <th>学分</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C语言</td>
                <td>4</td>
                <td>96</td>
            </tr>
            <tr>
                <td>大学物理</td>
                <td>3</td>
                <td>83</td>
            </tr>
            <tr>
                <td>物理实验</td>
                <td>1</td>
                <td>90</td>
            </tr>
            <tr>
                <td>大学英语</td>
                <td>4</td>
                <td>81</td>
            </tr>
            <tr>
                <td>工程数学</td>
                <td>6</td>
                <td>90</td>
            </tr>
            <tr>
                <td>马克思主义基本原理</td>
                <td rowspan="2" colspan="2">3</td>
            </tr>
            <tr >
                <td>形势与政策</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">大吉大利</td>
            </tr>
        </tfoot>
        
    </table>