前言

表格是網頁製做中使用最多的工具之一，在製做網頁時，使用表格能夠更清晰地排列數據。可是在實際製做過程當中，表格更多用在網頁佈局的定位上。不少網頁都是以表格佈局的。這是由於表格在文本和圖像的位置控制方面都有很強的功能。html

1.表格的基本構成

表格由行、列、和單元格3部分組成，通常經過3個標記來建立，分別是表格標記<table>、行標記<tr>、和單元格標記<td>。表格的各類屬性都要在表格的開始標記<table>和表格的結束標記</table>之間纔有效。工具

建立表格的四個元素：佈局

table、tr、th、tdui

<tabel>...</table>:整個表格以<table>標記開始、</table>標記結束。編碼

<tr>...</tr>：表格的一行，那麼覺得着有幾對<tr></td>，表格就有幾行。spa

<td>...</td>:表格的一個單元格，一行中包含幾對<td></td>,說明一行中就有幾列。設計

<th></th>:表格的頭部的一個單元格，表格表頭。code

表格中列的個數，取決於一行中數據單元格的個數htm

<table>
    <tr>
        <th>動物名稱</th>
        <th>物種</th>
        <th>生活習性</th>
        <th>食性</th>
    </tr>
    <tr>
        <td>老虎</td>
        <td>貓科動物</td>
        <td>單獨活動</td>
        <td>肉食</td>
    </tr>
    <tr>
        <td>獅子</td>
        <td>貓科動物</td>
        <td>集羣</td>
        <td>肉食</td>
    </tr>
    <tr>
        <td>大象</td>
        <td>哺乳綱動物</td>
        <td>羣居</td>
        <td>草食</td>
    </tr>
</table>

內容僅作實例參考，不保證其真實性blog

表格屬性

表格標題caption

一個表格只能有一個標題

在上述代碼的<table></table>間添加<caption>動物世界</caption>

表格寬度與高度

表格寬度爲width，高度爲height

語法爲<table width="500" height="130">

如下功能實現與此相似，將不進行示例

表格表頭對齊方式align

語法爲<table align="對齊方式">

在對齊方式中填入相應的屬性值：

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

表格邊框寬度border

border值不設置時或設置爲0時，顯示爲無邊框

語法爲<table border="5"> , 5爲邊框寬度

表格邊框顏色bordercolor

語法爲<table bordercolor="#66ccff"> ，各顏色對應的具體編碼可從網上查找

表格內框寬度cellspacing

表格內框寬度屬性用於設置表格內部每一個單元格之間的間距

語法爲<table cellspacing="內框寬度值">

表內文字與邊框邊距cellpadding

在默認狀況下，單元格里的內容會緊貼着表格的邊框，這樣看上去會很是擁擠，可用詞語法設置其間距離

語法爲<table cellspadding="文字與邊框距離值">

表格背景顏色bgcolor

語法爲<table bgcolor="7fffaa">

表格背景圖像background

語法爲<table background="圖片連接">

表格表首標記thead

表首樣式的開始標記是<thead>，結束標記是</thead>。它用於定義表格最上端表首的樣式，能夠設置背景顏色、文字對齊方式、文字垂直方式等。

表主體標記tbody

表主體標記與表首標記功能相似，表主體樣式用於統一設計表主體部分的樣式，標記爲<tbody>

表格表尾標記tfoot

<tfoot>用於定義表尾樣式

行屬性

表格行屬性設置

表格中行屬性的設置與表格的屬性設置相似，只須要將相關的屬性值添加在行標籤中便可，如<tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3"> 多個參數值用空格隔開

表格行對齊方式

表格中行對齊方式除了上面在表頭對齊方式中介紹的水平對齊方式align，還有垂直對齊方式valign

語法爲<tr valign="對齊方式">

可設置的值有三個：top、middle、bottom

valign也可用於單元格屬性

單元格屬性

單元格大小

語法爲<td width="8" height="5">

水平跨度colspan

在設計表格時，有時須要將兩個或多個相鄰單元格合成一個單元格

語法爲<td colspan="跨度的列數">

垂直跨度rowspan

單元格除了能夠在水平方向上跨列，還能夠在垂直方向上跨行

語法爲<td rowspan="跨度的行數">

給出一段實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">
    	<caption>動物世界</caption>
    <tr>
        <th>動物名稱</th>
        <th>物種</th>
        <th>生活習性</th>
        <th>食性</th>
    </tr>
    <tr align="center">
        <td>老虎</td>
        <td>貓科動物</td>
        <td>單獨活動</td>
        <td rowspan="2">肉食</td>
    </tr>
    <tr align="center">
        <td>獅子</td>
        <td>貓科動物</td>
        <td>集羣</td>

    </tr>
    <tr align="center">
        <td>大象</td>
        <td>哺乳綱動物</td>
        <td>羣居</td>
        <td>草食</td>
    </tr>
</table>
</body>
</html>

前端學習筆記一一HTML表格標籤（table）

前言