html5之表格

一.最基本的表格

表格标签：

         <table>：表格的最外层容器

         <tr>:  定义表格行

         <th>: 定义表头

         <td>:定义表格单元

        <caption>:定义表格标题

 

    <table>
        <tr>
            <th>日期</th>
            <th>天气</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td>1月1号</th>
            <td>晴</th>
            <td>适合出行</th>
        </tr>
        <tr>
            <td>1月2号</th>
            <td>暴雨</th>
            <td>不宜出行</th>
        </tr>
    </table>

实现的表格：

 

是不是看起来很丑？但是没关系，接下来我们可以给表格添加属性美化一下，来一个更难一点的

 

        border:表格边框

        cellpadding:单元格内的空间

        cellspacing:单元格之间的空间

        rowspan:合并行

        colspan:合并列

        align:左右对齐方式

        valign:上下对齐方式

 

    <table border="1" cellpadding=10 align="center">
        <tr align="center">
            <th>班次名称</th>
            <th>科目</th>
            <th>授课内容</th>
            <th>增值服务</th>
            <th>课时</th>
            <th>价格</th>
        </tr>
        <tr align="center">
            <th rowspan="3">真题精解班</th>
            <td>行测+申论</td>
            <td>全科历年真题精解</td>
            <td rowspan="3">课后赠两套模拟卷</td>
            <td>48</td>
            <td>1280元</td>
        </tr>
        <tr align="center">
            <td>行测</td>
            <td>行测历年真题精解</td>
            <td>32</td>
            <td>980元</td>
        </tr>
        <tr align="center">
            <td>申论</td>
            <td>申论历年真题精解</td>
            <td>16</td>
            <td>580元</td>
        </tr>
        <tr align="center">
            <th rowspan="3">高分技巧班</th>
            <td>行测+申论</td>
            <td>全科技巧强化</td>
            <td rowspan=3>入学试卷测评</td>
            <td>32</td>
            <td>980元</td>
        </tr>
        <tr align="center">
            <td>行测</td>
            <td>行测速解技巧强化</td>
            <td>18</td>
            <td>680元</td>
        </tr>
        <tr align="center">
            <td>申论</td>
            <td>申论速解技巧强化</td>
            <td>14</td>
            <td>580元</td>
        </tr>
    </table>

这是一个相对复杂一点的表格，但其实并没有那么难，可以尝试一下：