HTML表格與DIV應(yīng)用

創(chuàng)建表格

表格由 <table>標簽來定義梦碗。每個表格均有若干行（由 <tr>標簽定義）摸航，每行被分割為若干單元格（由 <td> 標簽定義）暑劝。字母 td 指表格數(shù)據(jù)（table data）繁调，即數(shù)據(jù)單元格的內(nèi)容贡珊。數(shù)據(jù)單元格可以包含文本、圖片涉馁、列表门岔、段落、表單烤送、水平線寒随、表格等等。
創(chuàng)建表格（添加邊框border屬性）

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

完善表格

caption元素定義表格標題
表格一般都有標題帮坚，在 HTML 中表格標題通過<caption>定義妻往。

<table border="1" width="300px" height="150px">
  <caption>
    表格標題
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

給表格添加表頭
表格的表頭使用 <th> 標簽進行定義，表頭通常用于列名字试和。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>備注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>買蘋果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>買飲料</td>
  </tr>
</table>

表格與單元格的屬性

image.png

單元格跨行和跨列

繪制表格的時候讯泣，我們常常需要合并單元格，而在 HTML 中提供了 colspan（合并行）和 rowspan（合并列）屬性來幫助我們實現(xiàn)這一效果阅悍。colspan 又稱跨列好渠，rowspan 又稱跨行。

<!--單元格合并-->>
        <table border="1" width="300px" height="150px">
            <caption>單元跨兩行</caption>
            <tr>
                <th>姓名</th>
                <th colspan="2">電話</th>
            </tr>
            <tr>
                <td>張三</td>
                <td>344 22 112</td>
                <td>211 32 123</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>433 31 234</td>
                <td>311 12 145</td>
            </tr>
        </table>
        <table border="1" cellspacing="0">
            <caption>單元跨兩列</caption>
            <tr>
                <th>姓名</th>
                <td>張三</th>
            </tr>
            <tr>
                <th rowspan="2">電話</th>
                <td>344 22 112</td>
            </tr>
            <tr>
                <td>211 32 123</td>
            </tr>
        </table>

注：設(shè)置 rowspan="2" 表示合并該列上的兩個單元格节视，同樣的我們可以通過設(shè)置 colspan 來合并行拳锚，快動手試試吧。合并之前寻行，我們可以如例子般霍掺，先把所有的單元格都寫出來，然后找出哪些單元格需要合并的，在第一個單元格內(nèi)設(shè)置 rowspan 或者 colspan杆烁，并將其他多余的單元格代碼刪除牙丽。

div設(shè)置

在網(wǎng)頁中可以使用很多個 div，在網(wǎng)頁制作中兔魂，使用 div 可以將網(wǎng)頁中的任何元素布局到網(wǎng)頁中的任何位置剩岳。
語法：
<div style="樣式設(shè)置"><div></div></div>
div和table的區(qū)別
div布局：

<div style="width:100%;border:1px solid #d4d4d4"  >
    <div style="background-color:pink">我非故人</div>
    <div style="background-color:skyblue">我非故人</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
    <tr>
        <td style="background:pink">我非故人</td>
    </tr>
    <tr>
        <td bgcolor="skyblue">我非故人</td>
    </tr>
</table>

兩個布局的最終效果：

image.png

同樣的效果，使用 div 布局能比表格更加靈活入热，但是我們需要根據(jù)不同的場景使用不同的布局方式拍棕，現(xiàn)在我們來看看兩種布局的優(yōu)缺點。
table 元素布局:
優(yōu)點：
1.理解比較簡單勺良。
2.不同的瀏覽器看到的效果一般相同绰播。
缺點：
1.顯示樣式和數(shù)據(jù)綁定在一起。
2.布局的時候靈活度不高尚困。
3.一個頁面可能會有大量的 table 元素蠢箩，代碼冗余度高。
4.增加帶寬事甜。
5.搜索引擎不喜歡這樣的布局谬泌。
div 元素布局
優(yōu)點：
1.符合 W3C 標準。
2.搜索引擎更加友好逻谦。
3.樣式的調(diào)整更加方便掌实，內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便邦马。
4.節(jié)省代寬贱鼻，代碼冗余度低。
5.表現(xiàn)和結(jié)構(gòu)分離滋将，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性邻悬。

本章作業(yè)

請你嘗試著根據(jù)我們前面所需的內(nèi)容繪制如下所示的課程表：

image.png

源碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>課程表</title>
    </head>
    <body>
        <table border="1" bgcolor="pink" width="60%" cellpadding="2">
            <caption>課程表</caption>
            <tr align="center">
                <td colspan="3">時間\日期</td>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
            </tr>

            <tr align="center">
                <td rowspan="2">上午</td>
                <td colspan="2">9:30-10:15</td>
                <td>語文</td>
                <td>數(shù)學</td>
                <td>外語</td>
                <td>音樂</td>
                <td>體育</td>
            </tr>

            <tr align="center">
                <td colspan="2">10:25-11:10</td>
                <td>數(shù)學</td>
                <td>數(shù)學</td>
                <td>物理</td>
                <td>化學</td>
                <td>生物</td>
            </tr>

            <tr>
                <td colspan="8">&nbsp;</td>
            </tr>

            <tr align="center">
                <td rowspan="2">下午</td>
                <td colspan="2">14:30-15:15</td>
                <td>體育</td>
                <td>語文</td>
                <td>歷史</td>
                <td>政治</td>
                <td>化學</td>
            </tr>

            <tr align="center">
                <td colspan="2">15:25-16:10</td>
                <td>音樂</td>
                <td>語文</td>
                <td>數(shù)學</td>
                <td>美術(shù)</td>
                <td>語文</td>
            </tr>
        </table>
    </body>
</html>