例
一個簡單的 HTML 表格,帶有兩個單元格:
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
瀏覽器支持
所有主流瀏覽器都支持 <td> 標簽。
標簽定義及使用說明
<td> 標簽定義 HTML 表格中的標準單元格。
HTML 表格有兩種單元格類型:
表頭單元格 - 包含頭部信息(由 <th> 元素創建)
標準單元格 - 包含數據(由 <td> 元素創建)
<th> 元素中的文本通常呈現為粗體并且居中。
<td> 元素中的文本通常是普通的左對齊文本。
提示和注釋
提示:如果需要將內容橫跨多個行或列,請使用 colspan 和 rowspan 屬性!
HTML 4.01 與 HTML5之間的差異
HTML 5 中不再支持 HTML 4.01 中的某些屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
abbr | text | HTML5 不支持。規定單元格中內容的縮寫版本。 |
align | leftrightcenterjustifychar | HTML5 不支持。規定單元格內容的水平對齊方式。 |
axis | category_name | HTML5 不支持。對單元格進行分類。 |
bgcolor | rgb(x,x,x)#xxxxxxcolorname | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的背景顏色。 |
char | character | HTML5 不支持。規定根據哪個字符來進行內容的對齊。 |
charoff | number | HTML5 不支持。規定對齊字符的偏移量。 |
colspan | number | 規定單元格可橫跨的列數。 |
headers | header_id | 規定與單元格相關聯的一個或多個表頭單元格。 |
height | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 設置單元格的高度。 |
nowrap | nowrap | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格中的內容是否折行。 |
rowspan | number | 設置單元格可橫跨的行數。 |
scope | colcolgrouprowrowgroup | HTML5 不支持。定義將表頭單元格與數據單元格相關聯的方法。 |
valign | topmiddlebottombaseline | HTML5 不支持。規定單元格內容的垂直排列方式。 |
width | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的寬度。 |
全局屬性
<td> 標簽支持 HTML 的全局屬性。
事件屬性
<td> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
格標簽:
table 表格標簽
熟悉表格常用的單詞:
border 邊距,align 格式 :‘ center’ 對齊,cellspacing 單元格與單元格的距離,cellpadding 單元格與內容的距離,wedth 寬度,height 高度,tr 表示:行,th 表示:表頭,td :表示列
編輯表格:
生成表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
</table>
</table>
</body>
</html>
用于呈現邏輯上并列的具有相關性的數據內容.
<ul>
<li></li>
</ul>
disc: 實心圓點
circle: 空心圓圈
square: 實心正方形
<ol>
<li></li>
</ol>
1: 阿拉伯數字
i: 小寫羅馬數字
I: 大寫羅馬數字
A: 大寫字母
a: 小寫字母
適用呈現包含主題及描述的數據內容.
<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表頭
tbody: 表體
tfoot: 表腳
th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.
表格的屬性控制:
border: 邊框
bordercolor: 邊框顏色
width: 寬度
height: 高度
cellspacing: 單元格間距(外)
cellpadding: 單元格填充(內)
align: 表格的位置控制
單元格的屬性控制:
align
valign
如何合并單元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并后, 會引發單元格數量的減少!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。