码迷,mamicode.com
首页 > 其他好文 > 详细

前端(3)表格table

时间:2018-03-02 01:12:41      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:行合并   属性   bsp   max   一个   区分   --   分区   gpo   


表格的标签:
table:一个表格区域
thead:表头区
tbody:表内容区
tfoot:表底区
thead、tbody、tfoot的分区,用于方便区分,可以不写

tr:一个表格行
th:一个表头格
td:一个表内容格
通常,tr放在thead、tbody、tfoot里面,th、td放在tr里面。
例如:

    <table border="1">
        <caption><b>学员信息表</b></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>Jack</td>
                <td>1</td>
            </tr>
            <tr>
                <td>02</td>
                <td>Max</td>
                <td>1</td>
            </tr>
            <tr>
                <td>03</td>
                <td>Van</td>
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>04</td>
                <td>John</td>
                <td>3</td>
            </tr>
            <tr>
                <td>05</td>
                <td>Lucy</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

表格的属性:
rowspan :跨行合并,该单元格向下合并n行,在下面的行中,会自动跳过该列,注意排版
colspan :本行合并,该单元格向右合并n列,注意排版

例如:

    <table border="1">
        <caption><b>学员信息表</b></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td rowspan="2">Jack</td>
                <td>1</td>
            </tr>
            <tr>
                <td>02</td>
                <!--<td>Max</td>-->
                <td>1</td>
            </tr>
            <tr>
                <td colspan="2">03</td>
                <!--<td>Van</td>-->
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>04</td>
                <td rowspan="2" colspan="2">John</td>
                <!--<td>3</td>-->
            </tr>
            <tr>
                <td>05</td>
                <!--<td>Lucy</td>-->
                <!--<td>3</td>-->
            </tr>
        </tfoot>
    </table>

表格的样式:
border-collapse:
collapse 边框合并,如果相邻的话,共用一个框
separate 默认值,边框分开,不合并
例如:

    <style>
        table{
            width: 200px;
            height: 200px;
            border-collapse: collapse;
        }
    </style>

 

前端(3)表格table

标签:行合并   属性   bsp   max   一个   区分   --   分区   gpo   

原文地址:https://www.cnblogs.com/ikamu/p/8490909.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!