025_html表格
1. 你可以使用html創建表格。
2. 表格
2.1. 表格由<table>標簽來定義。
2.2. 每個表格均有若干行(由<tr>標簽定義), 每行被分割為若干單元格(由<td>標簽定義)。
2.3. 簡單的html表格由table元素以及一個或多個tr、th或td元素組成。
2.4. 更復雜的html表格也可能包括caption、col、colgroup、thead、tfoot以及tbody元素。
2.5. <table>標簽可選屬性
3. <tr>標簽
3.1. <tr>標簽定義html表格中的行。
3.2. tr元素包含一個或多個th或td元素。
3.3. 可選屬性
4. <th>標簽
4.1. <th>標簽定義表格內的表頭單元格。
4.2. html表單中有兩種類型的單元格:
- 表頭單元格: 包含表頭信息(由th元素創建)
- 標準單元格: 包含數據(由td元素創建)
4.3. th元素內部的文本通常會呈現為居中的粗體文本, 而td元素內的文本通常是左對齊的普通文本。
4.4. 可選屬性
5. <td>標簽
5.1. <td>標簽定義html表格中的標準單元格。
5.2. td元素中的文本一般顯示為正常字體且左對齊。
5.3. 字母td(table data)指表格數據, 即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
5.4. 可選屬性
5.5. 例子
5.5.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>表格</title></head><body><table><tr><th>table head 1</th><th>table head 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table></body> </html>5.2.2. 效果圖
6. <table>標簽的border屬性
6.1. 如果不定義邊框屬性, 表格將不顯示邊框。有時這很有用, 但是大多數時候, 我們希望顯示邊框。
6.2. border屬性規定圍繞表格的邊框的寬度。
6.3. border屬性會為每個單元格應用邊框, 并用邊框圍繞表格。如果border屬性的值發生改變, 那么只有表格周圍邊框的尺寸會發生變化。表格內部的邊框則是1像素寬。
6.4. 從實用角度出發, 最好不要規定邊框, 而是使用CSS來添加邊框樣式和顏色。
6.5. 例子
6.5.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>表格邊框</title></head><body><table border="1"><tr><th>table head 1</th><th>table head 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table><table border="10"><tr><th>table head 1</th><th>table head 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table></body> </html>6.5.2. 效果圖
7. <table>標簽的cellpadding屬性
7.1. cellpadding屬性規定單元邊沿與其內容之間的空白。
7.2. 從實用角度出發, 最好不要規定cellpadding, 而是使用CSS來添加內邊距。
7.3. 例子
7.3.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>cellpadding屬性規定單元邊沿與其內容之間的空白</title></head><body><h4>沒有cellpadding:</h4><table border="1"><tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr></table><h4>帶有cellpadding:</h4><table border="1" cellpadding="10"><tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr></table></body> </html>7.3.2. 效果圖
8. <table>標簽的cellspacing屬性
8.1. cellspacing屬性規定單元格之間的空間。
8.2. 例子
8.2.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>cellspacing屬性規定單元格之間的空間</title></head><body><h4>沒有cellspacing:</h4><table border="1"><tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr></table><h4>帶有cellspacing:</h4><table border="1" cellspacing="10"><tr><td>First</td><td>Row</td></tr> <tr><td>Second</td><td>Row</td></tr></table></body> </html>8.2.2. 效果圖
9. <th>標簽和<td>標簽的colspan屬性和rowspan屬性
9.1. colspan合并列單元格。
9.2. rowspan合并行單元格。
9.3. 例子
9.3.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>橫跨多行多列單元格</title></head><body><h4>橫跨兩列的單元格:</h4><table border="1"><tr><th>姓名</th><th colspan="2">電話</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table><h4>橫跨兩行的單元格:</h4><table border="1"><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th rowspan="2">電話</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table></body> </html>9.3.2. 效果圖
10. <thead>、<tbody>和<tfoot>標簽
10.1 定義和用法
10.1.1. <thead>標簽定義表格的表頭。該標簽用于組合html表格的表頭內容。
10.1.2. <tbody>標簽定義表格主體(正文)。該標簽用于組合html表格的主體內容。
10.1.3. <tfoot>標簽定義表格的頁腳(腳注)。該標簽用于組合html表格中的腳注內容。
10.1.4. thead、tbody以及tfoot元素應該結合起來使用。
10.1.5. 如果您使用thead、tbody以及tfoot元素, 您就必須使用全部的元素。它們的出現次序是: thead、tbody、tfoot, 這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在table元素內部使用這些標簽。
10.1.6. thead、tbody以及tfoot元素使您有能力對表格進行分組。當您創建某個表格時, 您也許希望擁有一個表頭行, 一些帶有數據的行, 以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格表頭和頁腳的表格正文滾動。當長的表格被打印時, 表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
10.1.7. <thead>內部必須擁有<tr>標簽。
10.2. <thead>可選屬性
10.3. <tbody>可選屬性?
10.4. <tfoot>可選屬性
10.5. 例子
10.5.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>thead、tbody和tfoot標簽</title></head><body><table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot></table></body> </html>10.5.2. 效果圖
11. <caption>標簽
11.1. caption標簽定義表格標題。
11.2. caption標簽必須緊隨table標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
11.3. 可選屬性
11.4. 例子
11.4.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>caption標簽定義表格標題</title></head><body><table border="6"><caption>我的標題</caption><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table></body> </html>11.4.2. 效果圖
總結
以上是生活随笔為你收集整理的025_html表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 019_html超链接
- 下一篇： 061_html字符实体