碼上歡樂
相關內容    簡體    繁體

Web開發——HTML基礎（HTML表格
本文轉載自   查看原文   2018-10-13 17:10   3342    Web開發（HTML）

參考：

目錄：

1、舉例

　　每個表格由 table 標簽開始。
　　每個表格行由 tr 標簽開始。
　　每個表格數據由 td 標簽開始。

　　舉例1（表格）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10     
11         <h4>one column</h4>
12         <table border="1">
13             <tr>
14                 <td>100</td>
15             </tr>
16         </table>
17         
18         <h4>one row, three column</h4>
19         <table border="1">
20             <tr>
21                 <td>100</td>
22                 <td>200</td>
23                 <td>300</td>
24             </tr>
25         </table>
26         
27         <h4>two row, three column</h4>
28         <table border="1">
29             <tr>
30                 <td>100</td>
31                 <td>200</td>
32                 <td>300</td>
33             </tr>
34             <tr>
35                 <td>400</td>
36                 <td>500</td>
37                 <td>600</td>
38             </tr>
39         </table>
40     
41     </body>
42 </html>

　　輸出結果：

　　舉例2（表格邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with no border</h4>
12         <table>
13             <tr>
14                 <td>First</td>
15                 <td>row1</td>
16             </tr>
17             <tr>
18                 <td>Second</td>
19                 <td>row2</td>
20             </tr>
21         </table>
22         
23         <h4>two row, two column, with a normal border</h4>
24         <table border="1">
25             <tr>
26                 <td>First</td>
27                 <td>row1</td>
28             </tr>
29             <tr>
30                 <td>Second</td>
31                 <td>row2</td>
32             </tr>
33         </table>
34         
35         <h4>two row, two column, with rough border</h4>
36         <table border="8">
37             <tr>
38                 <td>First</td>
39                 <td>row1</td>
40             </tr>
41             <tr>
42                 <td>Second</td>
43                 <td>row2</td>
44             </tr>
45         </table>
46         
47         <h4>two row, two column, with thick border</h4>
48         <table border="16">
49             <tr>
50                 <td>First</td>
51                 <td>row1</td>
52             </tr>
53             <tr>
54                 <td>Second</td>
55                 <td>row2</td>
56             </tr>
57         </table>
58     
59     </body>
60 </html>

　　輸出結果：

 

2、表格

2.1 表格屬性

　　可選的屬性：

）
屬性 值 描述
align
  • left
  • center
  • right

不贊成使用。請使用樣式代替。

規定表格相對周圍元素的對齊方式。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不贊成使用。請使用樣式代替。

規定表格的背景顏色。
border pixels 規定表格邊框的寬度。
cellpadding
  • pixels
  • %
 規定單元邊沿與其內容之間的空白。
cellspacing
  • pixels
  • %
 規定單元格之間的空白。
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border
 規定外側邊框的哪個部分是可見的。
rules
  • none
  • groups
  • rows
  • cols
  • all
 規定內側邊框的哪個部分是可見的。
summary text 規定表格的摘要。
width                                                
  • %
  • pixels                                  
 規定表格的寬度。                                                                                                                                                

全局屬性

　　<table> 標簽支持 HTML 中的全局屬性。

事件屬性

　　<table> 標簽支持 HTML 中的事件屬性。

　　表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

2.2 表格的表頭

　　表格的表頭使用 <th> 標簽進行定義。

　　大多數瀏覽器會把表頭顯示為粗體居中的文本：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13             <tr>
14                 <th>Heading</th>
15                 <th>Another Heading</th>
16             </tr>        
17             <tr>
18                 <td>First</td>
19                 <td>row1</td>
20             </tr>
21             <tr>
22                 <td>Second</td>
23                 <td>row2</td>
24             </tr>
25         </table>
26     
27     </body>
28 </html>

 

 　　輸出結果：

2.3 表格中的空單元格

　　舉例1（帶表頭和表邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13             <tr>
14                 <th>Heading</th>
15                 <th>Another Heading</th>
16             </tr>        
17             <tr>
18                 <td></td>
19                 <td>row1</td>
20             </tr>
21             <tr>
22                 <td>Second</td>
23                 <td>row2</td>
24             </tr>
25         </table>
26     
27     </body>
28 </html>

　　輸出結果：

　　舉例2（無表頭，不帶表邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table>
13             <tr>
14                 <td></td>
15                 <td>row1</td>
16             </tr>
17             <tr>
18                 <td>Second</td>
19                 <td>row2</td>
20             </tr>
21         </table>
22     
23     </body>
24 </html>

　　輸出結果：

2.4 帶標題的表格

　　舉例（帶邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13         <caption>My table title</caption>
14             <tr>
15                 <td>First</td>
16                 <td>row1</td>
17             </tr>
18             <tr>
19                 <td>Second</td>
20                 <td>row2</td>
21             </tr>
22         </table>
23     
24     </body>
25 </html>

　　輸出結果：

2.5 跨行或者跨列的表格

　　舉例（帶邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1</h4>
12         <table border="1">
13             <tr>
14                 <th>Name</th>
15                 <th colspan="2">Tel</th>
16                 <th colspan="3">Code</th>
17             </tr>
18             <tr>
19                 <td>name</td>
20                 <td>tel1</td>
21                 <td>tel2</td>
22                 <td>code1</td>
23                 <td>code2</td>
24                 <td>code3</td>
25             </tr>
26         </table>
27 
28         <h4>Table test1</h4>
29         <table border="1">
30             <tr>
31                 <th>Name</th>
32                 <td>name</td>
33             </tr>
34             <tr>
35                 <th rowspan="2">Tel</th>
36                 <td>tel1</td>
37             </tr>
38             <tr>
39                 <td>tel2</td>
40             </tr>
41             <tr>
42                 <th rowspan="3">Code</th>
43                 <td>code1</td>
44             </tr>
45             <tr>
46                 <td>code2</td>
47             </tr>
48             <tr>
49                 <td>code3</td>
50             </tr>                
51         </table>
52         
53     </body>
54 </html>

 　　輸出結果：

2.6 單元格的間距

　　舉例（帶邊框）：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1</h4>
12         <table border="1">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with cellspacing</h4>
26         <table border="1" cellspacing = "8">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

　　輸出結果：

2.7 單元格的邊距

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 without cellpadding</h4>
12         <table border="1">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with cellpadding</h4>
26         <table border="1" cellpadding = "8">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

　　輸出結果：

2.8 向表格添加背景顏色或者背景圖像

 　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 with bgcolor 1</h4>
12         <table border="1" bgcolor="red">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with bgcolor 2</h4>
26         <table border="1" bgcolor="baidu.jpg">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

　　輸出結果：

2.9 向表格單元添加背景顏色或者背景圖像

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 with bgcolor 1</h4>
12         <table border="1">
13             <tr>
14                 <td bgcolor="red">Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td bgcolor="baidu.jpg">Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25     </body>
26 </html>

　　輸出結果：

2.10 表格中排列內容（對齊方式）

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <table width="400" border="1">
12             <tr>
13                 <th align="left">Consumer projects</th>
14                 <th align="right">January</th>
15                 <th align="right">February</th>
16             </tr>        
17             <tr>
18                 <td align="left">Clothes</td>
19                 <td align="right">$241.10</td>
20                 <td align="right">$50.20</td>
21             </tr>
22             <tr>
23                 <td align="left">Cosmetics</td>
24                 <td align="right">$30.00</td>
25                 <td align="right">$44.45</td>
26             </tr>
27             <tr>
28                 <td align="left">Foods</td>
29                 <td align="right">$730.40</td>
30                 <td align="right">$650.00</td>
31             </tr>
32             <tr>
33                 <th align="left">Totals</th>
34                 <th align="right">$1001.50</th>
35                 <th align="right">$744.65</th>
36             </tr>
37         </table>
38 
39     </body>
40 </html>

　　輸出結果：

2.11 表格frame屬性（配置邊框是否可見） 

　　舉例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <p style="color: red"><strong>Table with frame="box":</strong></p>
12         <table frame="box">
13             <tr>
14                 <th>Month</th>
15                 <th>Savings</th>
16             </tr>
17             <tr>
18                 <td>January</td>
19                 <td>$100</td>
20             </tr>
21         </table>
22 
23         <p style="color: red"><strong>Table with frame="above":</strong></p>
24         <table frame="above">
25             <tr>
26                 <th>Month</th>
27                 <th>Savings</th>
28             </tr>
29             <tr>
30                 <td>January</td>
31                 <td>$100</td>
32             </tr>
33         </table>
34 
35         <p style="color: red"><strong>Table with frame="below":</strong></p>
36         <table frame="below">
37             <tr>
38                 <th>Month</th>
39                 <th>Savings</th>
40             </tr>
41             <tr>
42                 <td>January</td>
43                 <td>$100</td>
44             </tr>
45         </table>
46 
47         <p style="color: red"><strong>Table with frame="hsides":</strong></p>
48         <table frame="hsides">
49             <tr>
50                 <th>Month</th>
51                 <th>Savings</th>
52             </tr>
53             <tr>
54                 <td>January</td>
55                 <td>$100</td>
56             </tr>
57         </table>
58 
59         <p style="color: red"><strong>Table with frame="vsides":</strong></p>
60         <table frame="vsides">
61             <tr>
62                 <th>Month</th>
63                 <th>Savings</th>
64             </tr>
65             <tr>
66                 <td>January</td>
67                 <td>$100</td>
68             </tr>
69         </table>
70 
71     </body>
72 </html>

　　輸出結果：

3、thead、tbody、tfoot

　　對於結構復雜的表格，可以將表格分割成三個部分：題頭、正文和題注。而這三個部分分別用：thead、tbody和tfoot來標注。

  • thead：表格的頭，用來存放標題之類的內容。
  • tbody：表格的身體，用來存放數據本體內容。
  • tfoot：表格的腳，用來存放表格的腳注之類的內容。

　　在寫html代碼時候，thead、tbody和tfoot的內容（不論在html代碼中三者的先后順序如何），最終呈現出來的都是thead、tbody和tfoot的順序。

　　一般表格需要頁面需要表格加載完全后才會顯示出來。而加上thead、thead和tfoot后，會優先加載tbody的內容。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 【WEB基礎】HTML & CSS 基礎入門（7）表格 html table 表格 HTML table 表格邊框 html web頁面中table表格的使用方法和介紹 HTML表格基礎詳解 【HTML基礎】表格和表單 html table表格 豎向樣式 html表格（table）常用屬性 HTML-基於bootstrap的table表格 Html Table 表格 畫斜線
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM