p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}li.li3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}span.s1 {font: 12.0px 'PingFang SC'}span.s2 {font: 12.0px Helvetica}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: hyphen}
表格元素
一、元素
<table>:表示表格
<tr>:行
<td>:列
<th>:标題單元格,預設加粗,文字居中
<th>,<td>均屬于單元格,包含兩個合并屬性,colspan(列合并),rowspan(行合并)
<thead>添加表頭,
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
不管這段代碼放在編輯器的什麼位置,顯示的時候都會顯示在表格的第一行。
<tfoot>添加表腳,意思同表頭
<tbody>,表主體
<caption>,表标題。緊挨着表格的上方居中顯示表格的标題。
<colgroup>,設定列,為了處理某個列,span屬性定義處理哪些列。1:第一列,2:表示前兩列。如果要單獨設定第二列,那麼需要聲明兩個,先處理第一個,将列點移入第二位,在處理第二個即可。
<col>更靈活的設定列。表示單獨一列,一個表示一列,控制更加的靈活。如果設定了span則控制多列。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>表格元素</title>
</head>
<body>
<table border="1">
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<table border="1" style="width:300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<table border="1" style="width:300px;">
<tr>
<th rowspan="4">基本情況</th>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">統計:共兩人</td>
</tr>
</table>
<br>
<table border="1" style="width:300px;">
<caption>這是一個表格</caption>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<!--表腳 -->
<tfoot>
<tr>
<td colspan="3">統計:共兩人</td>
</tr>
</tfoot>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<!--表頭 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
<br>
<table border="1" style="width:300px;">
<colgroup span="1" style="background:green">
<colgroup span="1" style="background:red">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
</body>
</html>