當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

025_html表格

發(fā)布時間：2025/4/17 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 025_html表格小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 你可以使用html創(chuàng)建表格。

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>標簽定義表格內(nèi)的表頭單元格。

4.2. html表單中有兩種類型的單元格:

表頭單元格: 包含表頭信息(由th元素創(chuàng)建)
標準單元格: 包含數(shù)據(jù)(由td元素創(chuàng)建)

4.3. th元素內(nèi)部的文本通常會呈現(xiàn)為居中的粗體文本, 而td元素內(nèi)的文本通常是左對齊的普通文本。

4.4. 可選屬性

5. <td>標簽

5.1. <td>標簽定義html表格中的標準單元格。

5.2. td元素中的文本一般顯示為正常字體且左對齊。

5.3. 字母td(table data)指表格數(shù)據(jù), 即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

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. 如果不定義邊框?qū)傩? 表格將不顯示邊框。有時這很有用, 但是大多數(shù)時候, 我們希望顯示邊框。

6.2. border屬性規(guī)定圍繞表格的邊框的寬度。

6.3. border屬性會為每個單元格應用邊框, 并用邊框圍繞表格。如果border屬性的值發(fā)生改變, 那么只有表格周圍邊框的尺寸會發(fā)生變化。表格內(nèi)部的邊框則是1像素寬。

6.4. 從實用角度出發(fā), 最好不要規(guī)定邊框, 而是使用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屬性規(guī)定單元邊沿與其內(nèi)容之間的空白。

7.2. 從實用角度出發(fā), 最好不要規(guī)定cellpadding, 而是使用CSS來添加內(nèi)邊距。

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屬性規(guī)定單元邊沿與其內(nèi)容之間的空白</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屬性規(guī)定單元格之間的空間。

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屬性規(guī)定單元格之間的空間</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表格的表頭內(nèi)容。

10.1.2. <tbody>標簽定義表格主體(正文)。該標簽用于組合html表格的主體內(nèi)容。

10.1.3. <tfoot>標簽定義表格的頁腳(腳注)。該標簽用于組合html表格中的腳注內(nèi)容。

10.1.4. thead、tbody以及tfoot元素應該結(jié)合起來使用。

10.1.5. 如果您使用thead、tbody以及tfoot元素, 您就必須使用全部的元素。它們的出現(xiàn)次序是: thead、tbody、tfoot, 這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。您必須在table元素內(nèi)部使用這些標簽。

10.1.6. thead、tbody以及tfoot元素使您有能力對表格進行分組。當您創(chuàng)建某個表格時, 您也許希望擁有一個表頭行, 一些帶有數(shù)據(jù)的行, 以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格表頭和頁腳的表格正文滾動。當長的表格被打印時, 表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。

10.1.7. <thead>內(nèi)部必須擁有<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. 效果圖

總結(jié)

以上是生活随笔為你收集整理的025_html表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

表格
_HTML