HTML 表格

5.1表格
<table>表格
<caption>表格的標題
<thead>表頭的部分
<thody>表格的主體
<tfoot>表尾，彙總信息
<tr>一行
<th>表頭有加粗樣式
<td>表中信息，主體部分沒有加粗樣式
<td>的rowspan和colsoan分別定義單元格跨行的行數、跨列的列數
<rowspan>合併幾列
<colspan>合併幾行
<cellspacing >表格的間距

<table border="1" cellspacing="0" cellpadding="6">

    <caption>華鑫信息科技有限公司</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>出生年月</th>
        <th>職務</th>
        <th>電話</th>
        <th>部門</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>李東華</td>
        <td>男</td>
        <td>1995-01-01</td>
        <td>學生</td>
        <td>12345678901</td>
        <td rowspan="4">市場部</td>
    </tr>
    <tr>
        <td>李永剛</td>
        <td>男</td>
        <td>1996-01-01</td>
        <td>學生</td>
        <td>12345678901</td>
    </tr>
    <tr>
        <td>李壯壯</td>
        <td>男</td>
        <td>1997-01-01</td>
        <td>學生</td>
        <td>12345678901</td>
    </tr>
    <tr>
        <td>李東華</td>
        <td>男</td>
        <td>1995-01-01</td>
        <td>學生</td>
        <td>12345678901</td>
    </tr>
    <tr>
        <td>孟玉磊</td>
        <td>男</td>
        <td>1996-01-01</td>
        <td>總經理</td>
        <td>12345678901</td>
        <td rowspan="2">總經理辦公室</td>
    </tr>
    <tr>
        <td>孟玉磊</td>
        <td>男</td>
        <td>1996-01-01</td>
        <td>總經理</td>
        <td>12345678901</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="6">共計40人</td>
    </tr>
    </tfoot>
</table>

5.2 table佈局
佈局：是頁面的整體結構。
結構特點：從上往下，從左往右。一般每一行的高度是一樣的。

<table width="800px" border="1">
    <tbody>
    <tr>
        <td colspan="3"><img src="img/logo.png" alt=""></td>
        <!--<td></td>-->
        <!--<td></td>-->
    </tr>
    <tr>
        <td colspan="3">
            <table border="1">
                <tr>
                    <td width="260"></td>
                    <td>首頁</td>
                    <td>學院概況</td>
                    <td>機構設置</td>
                    <td>新聞公告</td>
                    <td>教學科研</td>
                    <td>招生就業</td>
                    <td>數字校園</td>
                </tr>
            </table>
        </td>
        <!--<td></td>-->
        <!--<td></td>-->
    </tr>
    <tr>
        <td><img src="img/row_2_left.png" alt=""></td>
        <td colspan="2"><img src="img/row_2_right.png"></td>
        <!--<td></td>-->
    </tr>
    <tr>
        <td><img src="img/row_3_links.png"></td>
        <td><img src="img/row_3_new.png"></td>
        <td><img src="img/row_3_info.png"></td>
    </tr>
    </tbody>
</table>

效果圖如下

首頁

學院概況

機構設置

新聞公告

教學科研

招生就業

數字校園

   頁面的佈局可以通過table來實現，一個單元格就是一個佈局區域單位。該區域的大小可以通過height和width屬性來設置，位置是通過單元格的相對位置來體現。同時可以結合rowspan和colspan兩個屬性來完成。
   當佈局比較複雜的時候可以使用teble的嵌套來實現，即在某個單元格在嵌入一個table進行劃分