前端開發:HTML-表格
阿新 • • 發佈:2018-07-29
歷史 -- 分割 星期 row ont 單元 邊框 true
HTML 表格
表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
<table border="1"> <tr> <td>語文</td> <td>數學</td> <td>外語</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> </tr> </table>
顯示如下:
HTML 表格和邊框屬性
<table border="1">
HTML 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本:
<tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr>
<table border="1"> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>歷史</td> <td>物理</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> </table>
實例:
沒有邊框的表格
<table> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>歷史</td> <td>物理</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> </table>
帶有標題的表格
<table border="1"> <caption>課程表</caption> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>歷史</td> <td>物理</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> </table>
單元格合並
<div class="table"> <table border="1" cellpadding="0"> <!--表格頭--> <thead> <!--表格行--> <tr> <th>時間</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <!--表格行--> <tr> <!--跨行合並--> <td rowspan="3">上午</td> <td>語文</td> <td>數學</td> <td>外語</td> <td>歷史</td> <td>物理</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> <tr> <td rowspan="2">下午</td> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> <tr> <td>語文</td> <td>數學</td> <td>外語</td> <td>化學</td> <td>生物</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <!--跨列合並--> <td colspan="6">課程表</td> </tr> </tfoot> </table> </div>
單元格邊距:
<h4>沒有單元格邊距:</h4> <table border="1"> <tr> <td>語文</td> <td>數學</td> </tr> </table> <h4>有單元格邊距:</h4> <table border="1" cellpadding="10"> <tr> <td>語文</td> <td>數學</td> </tr>
HTML 表格標簽
前端開發:HTML-表格