table邊框表頭單元格空間合並等設置


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

1 HTML 表格的基本結構:
2 <table></table>:定義表格
3 <th></th>:定義表格的標題欄(文字加粗)
4 <tr></tr>:定義表格的行
5 <td></td>:定義表格的列

HTML 表格和邊框屬性,如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框,使用邊框屬性border來顯示一個帶有邊框的表格:

1 <table border="1">
2     <tr>
3         <td>Row 1, cell 1</td>
4         <td>Row 1, cell 2</td>
5     </tr>
6 </table>

HTML 表格表頭單元格:表格的表頭單元格使用<th>標簽進行定義;表格的表頭單元格屬性主要是一些公共屬性,如:align、dir、width、height。 大多數瀏覽器會把表頭顯示為粗體居中的文本:

 1 <table border="1">
 2     <tr>
 3         <th>Header 1</th>
 4         <th>Header 2</th>
 5     </tr>
 6     <tr>
 7         <td>row 1, cell 1</td>
 8         <td>row 1, cell 2</td>
 9     </tr>
10     <tr>
11         <td>row 2, cell 1</td>
12         <td>row 2, cell 2</td>
13     </tr>
14 </table>

表格標題<caption>:在<table>標簽中我們可以使用<caption> ... </ caption>標簽作為標題,並在表的頂部顯示出來*此標簽在較新版本的HTML / XHTML中已棄用

1 table border = "1">
2     <caption>這是標題</caption>
3     <tr>
4         <td>row 1, column 1</td><td>row 1, columnn 2</td>
5     </tr>         
6     <tr>
7         <td>row 2, column 1</td><td>row 2, columnn 2</td>
8     </tr>
9 </table>

HTML表格高度和寬度:在<table>標簽中您可以使用width(寬)和height(高)屬性設置表格寬度和高度。您可以按像素或可用屏幕區域的百分比來指定表格寬度或高度。

 1 <table border = "1" width = "400" height = "150">
 2     <tr>
 3         <td>Row 1, Column 1</td>
 4         <td>Row 1, Column 2</td>
 5     </tr>
 6     <tr>
 7         <td>Row 2, Column 1</td>
 8         <td>Row 2, Column 2</td>
 9     </tr>
10 </table>

HTML表格背景:您可以使用以下方法之一設置HTML表格的背景,HTML5中不推薦使用bgcolor,background和bordercolor屬性,不要使用這些屬性:

  • bgcolor屬性 - 可以為整個表格或僅為一個單元格設置背景顏色。
  • background屬性 - 可以為整個表設置背景圖像或僅為一個單元設置背景圖像
  • bordercolor屬性 - 可以設置邊框顏色。
 1 <body>
 2     <table border = "1" bordercolor = "green" bgcolor = "yellow">
 3         <tr>
 4             <th>Column 1</th>
 5             <th>Column 2</th>
 6             <th>Column 3</th>
 7         </tr>
 8     </table>
 9 <!-- 使用background屬性需要提供圖像 URL 地址-->
10 <table border = "1" bordercolor = "green" background = "/images/test.png">
11     <tr>
12         <th>Column 1</th>
13         <th>Column 2</th>
14         <th>Column 3</th>
15     </tr>
16 </table>
17 </body>

HTML表格空間:cellspacing屬性-定義表格單元格之間的空間 ,cellpadding屬性-表示單元格邊框與單元格內容之間的距離

 1 <table border = "1" cellpadding = "5" cellspacing = "5">
 2     <tr>
 3         <th>Name</th>
 4         <th>Salary</th>
 5     </tr>
 6     <tr>
 7         <td>其琛</td>
 8         <td>5000</td>
 9     </tr>
10     <tr>
11         <td>曼迪</td>
12         <td>7000</td>
13     </tr>
14 </table>

HTML合並單元格:如果要將兩個或多個列合並為一個列,將使用colspan屬性;如果要合並兩行或更多行,則將使用rowspan屬性。

 1 <table border = "1">
 2     <tr>
 3         <th>Column 1</th>
 4         <th>Column 2</th>
 5         <th>Column 3</th>
 6     </tr>
 7     <tr>
 8         <td rowspan = "2">Row 1 Cell 1</td>
 9         <td>Row 1 Cell 2</td>
10         <td>Row 1 Cell 3</td>
11     </tr>
12     <tr>
13         <td>Row 2 Cell 2</td>
14         <td>Row 2 Cell 3</td>
15     </tr>
16     <tr>
17         <td colspan = "3">Row 3 Cell 1</td>
18     </tr>
19 </table>

HTML表格頭部、主體、頁腳:表格可以分為三個部分 - 頭部,主體和頁腳,如同word文檔中頁面的頁眉、正文、頁腳。每個頁面保持相同,而正文是表格的主要內容持有者。頭部,主體和頁腳的對應的三個標簽是:

  1. <thead> - 創建單獨的表頭
  2. <tbody> - 表示表格的主體
  3. <tfoot> - 創建一個單獨的表頁腳

表可以包含多個<tbody>元素以指示不同的頁面,但值得注意的是<thead>和<tfoot>標簽應出現在<tbody>之前

 1 <table border = "1" width = "100%">
 2     <thead>
 3         <tr>
 4             <td colspan = "4">This is the head of the table</td>
 5         </tr>
 6     </thead>
 7          
 8     <tfoot>
 9         <tr>
10             <td colspan = "4">This is the foot of the table</td>
11         </tr>
12     </tfoot>
13          
14     <tbody>
15         <tr>
16             <td>Cell 1</td>
17             <td>Cell 2</td>
18             <td>Cell 3</td>
19             <td>Cell 4</td>
20         </tr>
21     </tbody>         
22 </table>

HTML表格的嵌套,您可以在另一個表中使用一個表。可以使用<table>內的幾乎所有標簽。


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM