HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google Maps注意
- 以下的程式碼皆是寫於<body>與</body>標籤之內。
- 程式碼的示範,已由本網站「樣式表自動修飾」,實際測試將依各家瀏覽器「預設樣式表不同而有差距」。
製作一個表格
製作一個表格首先要先姶<table>元素,接著用<tr>分成橫行,最後再將<td>格子插入<tr>中
- <table>
- <tr><td>學校</td><td>地址</td></tr>
- <tr><td>臺北市立第一女子高級中學</td><td>10045台北市中正區重慶南路一段 165 號</td></tr>
- <tr><td>臺北市立中山女中</td><td>10491台北市中山區長安東路二段141號</td></tr>
- <tr><td>臺北市立成功高級中學</td><td>100台北市中正區濟南路一段71號</td></tr>
- <tr><td>國立臺灣師範大學附屬高級中學</td><td>106台北市大安區信義路三段143號</td></tr>
- </table>
從這例子可以看出,<tr>是會上下排序的區塊元素,而<td>則可視為線內元素
<th>元素
以上範例中,最開頭的表格「學校」「地址」很顯然的跟其他欄位不同,算是表格頂端的「標題」,為了使CSS修飾更方便,可以使用<th>元素。(可將<th>視同<td>)
- <table>
- <tr>
<th>
學校</th><th>
地址</th>
</tr>- <tr><td>臺北市立第一女子高級中學</td><td>10045台北市中正區重慶南路一段 165 號</td></tr>
- <tr><td>臺北市立中山女中</td><td>10491台北市中山區長安東路二段141號</td></tr>
- <tr><td>臺北市立成功高級中學</td><td>100台北市中正區濟南路一段71號</td></tr>
- <tr><td>國立臺灣師範大學附屬高級中學</td><td>106台北市大安區信義路三段143號</td></tr>
- </table>
水平合併儲存格
利用「colspan」屬性水平合併「右方的儲存格」。
- <table>
- <tr><th>學校</th><th>地址</th></tr>
- <tr>
<td colspan="2">
臺北市立第一女子高級中學 10045台北市中正區重慶南路一段165號</td></tr>- <tr><td>臺北市立中山女中</td><td>10491台北市中山區長安東路二段141號</td></tr>
- <tr><td>臺北市立成功高級中學</td><td>100台北市中正區濟南路一段71號</td></tr>
- <tr><td>國立臺灣師範大學附屬高級中學</td><td>106台北市大安區信義路三段143號</td></tr>
- </table>
垂直合併儲存格
利用「rowspan」屬性垂直合併「下方的儲存格」。
- <table>
- <tr><th>學校</th><th>地址</th></tr>
- <tr>
<td rowspan="2">
北一女 & 中山女中</td><td>10045台北市中正區重慶南路一段 165 號</td></tr>- <tr><td>10491台北市中山區長安東路二段141號</td></tr>
- <tr><td>臺北市立成功高級中學</td><td>100台北市中正區濟南路一段71號</td></tr>
- <tr><td>國立臺灣師範大學附屬高級中學</td><td>106台北市大安區信義路三段143號</td></tr>
- </table>