HTML Table 表格 - Wibibi

HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格 ... 請注意HTML 語法都必須用一個開始標籤與一個結束標籤把內容包起來，開始標籤與 ... 首頁 HTML HTML5 PHP MySQL CSS CSS3 JavaScript 軟體介紹 其它 Home › HTML › HTMLTable表格 HTMLTable表格 HTML網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，分別是table、tr與td這幾個重點，組合起來才是個完整的表格，以下做個簡單的表格範例。

　　這裡可以放表格內容　呈現結果如下這裡可以放表格內容範例中使用了

與的標籤把內容包起來，標籤代表的是一行，而標籤則代表一列，為了清楚呈現，我們還為table加上了border="1"的設定，這代表這個table的邊框粗細是1，在實際使用上你也可以設定為其它的値，例如border="0"則不會顯示邊框。

請注意HTML語法都必須用一個開始標籤與一個結束標籤把內容包起來，開始標籤與結束標籤是對等的，缺一不可。

除了可以寫一個單純的表格之外，我們還可以設定table的寬度、高度或邊框樣式，要做這些設定，你必須先了解幾個能夠控制表格的元素，例如width、border、background...等。

width：控制table的寬度border：控制table邊框的粗細background：控制背景圖片colspan：控制儲存格橫跨幾個欄位rowspan：控制儲存格垂直跨幾個欄位接著我們寫幾個範例兩個欄位的table表格範例　　這裡是第一個欄位　這裡是第二個欄位　呈現結果如下這裡是第一個欄位這裡是第二個欄位兩行兩欄位的Table表格範例　　這裡是第一行的第一個欄位　這裡是第一行的第二個欄位　　　這裡是第二行的第一個欄位　這裡是第二行的第二個欄位　呈現結果如下這裡是第一行的第一個欄位這裡是第一行的第二個欄位這裡是第二行的第一個欄位這裡是第二行的第二個欄位接著我們把第一行變成一個欄位　　這裡是第一行　 　　這裡是第二行的第一個欄位　這裡是第二行的第二個欄位　呈現結果如下這裡是第一行這裡是第二行的第一個欄位這裡是第二行的第二個欄位最後做一個兩欄位的Table，第一個欄位rowspan="2"，第二個欄位有兩行　　這是第一個欄位　這裡是第二個欄位第一行　 　　這裡是第二個欄位第二行　呈現結果這是第一個欄位這裡是第二個欄位第一行這裡是第二個欄位第二行延伸閱讀HTML水平置中與垂直置中HTMLTable表格文字顏色HTMLTable表格的文字大小與字型HTML背景顏色bgcolor與背景圖片background設定CSSborder邊框HTMLTable表格邊框顏色與樣式設計HTMLTable表格背景顏色HTMLTablecellpadding屬性 您可能會想看 HTMLdiv標籤 設計HTML圖片與圖片邊框間的距離 DIV區塊內文字與邊框的距離調整 HTMLTABLE表格內的文字行高 DIV區塊內的文字行高設計 替HTMLbutton按鈕增加背景圖片 HTMLimgtitle與imgalt的差別 用CSS設計HTML表格欄位內文字靠下對齊 用CSS設計HTML表格欄位內文字靠上對齊 HTMLTablecolspan屬性 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012