1. 程式人生 > >前端(3)表格table

前端(3)表格table

跳過 合並 cap OS class 排版 head div pre


表格的標簽:
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