html总结---2

table的使用

一、代码如下：

# 生成3行2列的表格  ---快捷键--- table>tr*5>td*3{项目}
<table border="1">  # border加一个像素的边框
    <caption>工程项目表</caption>
        <tr>  # 行
            <td>项目</td> # 列
            <td>项目</td>
            <td>项目</td>
        </tr>
        <tr>
            <td>项目</td>
            <td>项目</td>
            <td>项目</td>
        </tr>
        <tr>
            <td rowspan="2">项目</td>  # rowspan合并行 指定合并数量
            <td>项目</td>
            <td>项目</td>
        </tr>
        <tr>
            <td>项目</td>
            <td>项目</td>
        </tr>
</table>

• 效果展示如下

工程项目表

项目	项目	项目
项目	项目	项目
项目	项目	项目
	项目	项目

二、代码如下：

<table border="3">
            <caption>学生成绩表</caption>
            <thead> # 表头
                <tr>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                </tr>
            </thead>
            <tbody> # 表身
                <tr>
                    <!-- rowspan合并行 指定合并数量-->
                    <td rowspan="3">2018</td>
                    <td>刘明湘</td>
                    <td>90</td>
                    <td>98</td>
                </tr>
                <tr>
                    <td>林志玲</td>
                    <td>78</td>
                    <td>66</td>
                </tr>
                <tr>
                    <td>高圆圆</td>
                    <td>69</td>
                    <td>87</td>
                </tr>
                <tr>
                    <td>2017</td>
                    <td>李易峰</td>
                    <td>38</td>
                    <td>47</td>
                </tr>
            </tbody>
            <tfoot> #表尾
                <tr>
                    <td colspan="2" align="right">平均分</td>
                <td>67</td>
                <td>76</td>
                </tr>
            </tfoot>
        </table>

学生成绩表

班级	姓名	语文	数学
2018	刘明湘	90	98
	林志玲	78	66
	高圆圆	69	87
2017	李易峰	38	47
平均分		67	76