標籤：stylesheet html css
本文介紹html中表格的基本用法。
代碼整理自w3school：http://www.w3school.com.cn
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>表格</title><head><link rel="stylesheet" type="text/css" href="css/tableStyle.css"></head><body><p>每個表格由 table 標籤開始。</p><p>每個表格行由 tr 標籤開始。</p><p>每個表格式資料(列)由 td 標籤開始。</p><!--基礎--><h4>一行一列：</h4><table border="1"><tr> <td>100</td></tr></table><h4>一行三列，較粗的邊框：</h4><table border="5"><tr> <td>100</td> <td>200</td> <td>300</td></tr></table><h4>三行三列，帶表頭，帶標題：</h4><table border="1"><caption>省份概況</caption><tr> <th>省份</th> <th>面積</th> <th>人口</th></tr><tr><tr> <td>河南省</td> <td>16.9</td> <td>9800</td></tr><tr> <td>湖北省</td> <td>18.6</td> <td>6200</td></tr></table><h4>三行兩列，帶垂直表頭：</h4><table border="1"><tr> <th>姓名</th> <td>張三</td></tr><tr><tr> <th>年齡</th> <td>19</td></tr><tr> <th>愛好</th> <td>籃球</td></tr></table><hr/><!--儲存格沒有內容時，邊框可能無法顯示，因此需要添加空白內容nbsp--><h4>某個儲存格沒有內容，邊框可能無法顯示：</h4><table border="1"><tr> <td>100</td> <td>200</td></tr><tr> <td></td> <td>400</td></tr></table><h4>添加空白內容nbsp之後：</h4><table border="1"><tr> <td>100</td> <td>200</td></tr><tr> <td> </td> <td>400</td></tr></table><hr/><!--跨行或跨列的儲存格--><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><!--在儲存格內顯示其它元素--><h4>在儲存格內顯示其它元素</h4><table border="1"><tr> <td> <p>這是一個段落</p> <p>這是另一個段落</p> </td> <td>這個儲存格包含一個表格 <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr><tr> <td>這個儲存格包含一個列表： <ul> <li>蘋果</li> <li>香蕉</li> <li>菠蘿</li> </ul> </td> <td>HELLO</td></tr></table><hr/><!--儲存格內的邊距：cellpadding--><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><hr/><!--儲存格間距：cellspacing--><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><!--表格的背景顏色和背景映像，可添加至整個表格或某個儲存格--><h4>表格添加背景顏色：</h4><table border="1" bgcolor="red"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>表格添加背景映像：</h4><table border="1" background="images/backgrond_image.jpg"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>儲存格添加背景顏色/映像：</h4><table border="1"><tr> <td background="images/backgrond_image.jpg">First</td> <td bgcolor="red">Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><hr/><!--使用align屬性設定儲存格內元素的對齊--><table width="400" border="1"> <tr> <th align="left">消費項目</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">總計</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr></table><hr/><!--帶有 thead、tbody 以及 tfoot 元素的 HTML 表格--><h4>表格的頁首，主體，頁尾(使用css自訂樣式)</h4><table border="1" class="baseTableStyle" cellpadding="10"> <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><br/><br/></body></html>CSS檔案：tableStyle.css
table.baseTableStyle thead{color:green}table.baseTableStyle tbody{color:blue;height:50px}table.baseTableStyle tfoot{color:red}HTML：表格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
