HTML+CSS基礎入門-第六天（HTML-表格）

原創

2020-02-22 10:20

基本格式

table標記的屬性

width屬性

表示表格的寬度，他的屬性值可以使像素（px）也可以是父級元素的百分比（%）

height屬性

表示表格的高度，他的屬性值可以使像素（px）也可以是父級元素的百分比（%）

border屬性

表示表格外邊框的的寬度

align屬性

表格顯示的位置

屬性值

left：居左顯示
center：居中顯示
right：居右顯示

cellspacing屬性

單元格之間的距離默認是2px 單位是像素

cellpadding

單元格距離與單元格邊框的顯示的距離，單位像素

frame屬性

控制單元格表格邊框最外層的四條線框

屬性值

void：默認值，表示無邊框
above：表示僅頂部有邊框
below：表示僅底部有邊框
hsides：表示僅底部和頂部有邊框
lhs：表示僅左側有邊框
rhs：表示僅右側有邊框
vsides：表示僅右側和左側有邊框
box：包含全部四個邊框
border：包含全部四個邊框

rules屬性

控制是否顯示單元格之間的分割線

屬性值

none：默認值，鄙視無分割線
all：表示包括所有的分割線
rows：表示僅有行分割線
clos：表示僅有列分割線
groups：表示僅在行組和列組之間有分割線

代碼

    <body>
        <table width="960sp" height="200sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
        rules="all"
        >
            <tr>
                <th>班級</th>
                <th>年齡</th>
                <th>性別</th>
                <th>成績</th>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>23</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>12</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>13</td>
                <td>男</td>
                <td>123</td>
            </tr>
        </table>
    </body>

顯示結果

caption標記

什麼時候使用

如果表格需要使用標題，那麼就可以使用此標記

如何正確使用

<caption>屬性的插入位置，直接位於<table>屬性之後，<tr>表格行之前。

align屬性

屬性值

top：標題放在表格的上部
bottom：標題擋在表格的下部
left：標題放在表格的左部
right：標題放在表格的右部

代碼

    <body>
        <table width="960sp" height="200sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
        rules="all"
        >
        <caption align="bottom">一年一班成員表</caption>
            <tr>
                <th>班級</th>
                <th>年齡</th>
                <th>性別</th>
                <th>成績</th>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>23</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>12</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr>
                <td>一年一班</td>
                <td>13</td>
                <td>男</td>
                <td>123</td>
            </tr>
        </table>
    </body>

顯示結果

tr標記

定義表格的每一行，對於每一個表格行，都是由一對<tr></tr>標記表示，每一行<tr>標記內也可以嵌套多個<td>或者<th>標記

bgcolor屬性

設置背景顏色

align屬性

設置垂直方向對齊方式

屬性值

bottom：靠底部對齊
top：靠頂部對齊
middle：居中對齊

valign屬性

設置水平方向對齊方式

屬性值

left：靠左齊
right：靠右齊
center：居中對齊

代碼

    <body>
        <table width="960sp" height="300sp" border="1" align="center" cellspacing="0px" cellpadding="5sp" frame="box"
        rules="all"
        >
        <caption align="bottom">一年一班成員表</caption>
            <tr bgcolor="#ccc">
                <th>班級</th>
                <th>年齡</th>
                <th>性別</th>
                <th>成績</th>
            </tr>
            <tr align="middle">
                <td>一年一班</td>
                <td>23</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr > 
                <td>一年一班</td>
                <td>12</td>
                <td>女</td>
                <td>123</td>
            </tr>
            <tr >
                <td>一年一班</td>
                <td>13</td>
                <td>男</td>
                <td>123</td>
            </tr>
        </table>
    </body>

顯示結果

td和th標記

兩者的區別

<th>和<td>都是單元格標記，起必須喬濤在<tr>標籤內，是成對出現的
<th>是表頭標記，通暢位於首行或者首列，<th>中的文字會默認加粗，而<td>不會
<td>是數據標記，表示該單元格的具體數據

共同之處

兩者標記的屬性都是一樣的

屬性

bgcolor：設置單元格背景
align：設置單元格對齊方式
valign：設置單元格垂直對齊方式
width：設置單元格寬度
height：設置單元格高度
rowspan：設置單元格所佔行數
colspan：設置單元格所佔列數

參考代碼

<html>
    <head>
        <title> 表格課</title>
        <meta charset="UTF-8">

    </head>
    <body>
        <table width="960" height="300" border="1" align="center" cellpadding="20" cellspacing="1" frame="box" rules="all">
            <caption align="bottom">表格的標題</caption>
            <tr bgcolor="#ccc" >
                <th bgcolor="red" align="left" width="100" rowspan="2" colspan="2">班級</th>
                <th>年齡</th>
                <th>姓名</th>
                <th>成績</th>
            </tr>
            <tr>
                <td>一班</td>
                <td>16</td>
                <td>離散</td>
                <td>100</td>
            </tr>
            <tr>
                <td>一班</td>
                <td>16</td>
                <td>離散</td>
                <td>100</td>
            </tr>
            <tr>
                <td>一班</td>
                <td>16</td>
                <td>離散</td>
                <td>100</td>
            </tr>
            <tr>
                <td>一班</td>
                <td>16</td>
                <td>離散</td>
                <td>100</td>
            </tr>
        </table>
    </body>
</html>