1. 程式人生 > >06-HTML-表格標簽

06-HTML-表格標簽

adding 單元格 加粗 cell 設置表格 nbsp 列合並 常用屬性 級別

<html>
<head>
<title>表格標簽學習</title>
<meta charset="utf-8"/>
<!--
表格標簽學習:
table:聲明一個表格
tr:聲明一行,設置行高及行所有單元格的高度。
th:聲明一個單元格,表頭格,默認加粗居中顯示
td:聲明一個單元格,默認居左顯示原始數據
註意:
行高即該行所有單元格的高度
單元格的寬度即列寬
屬性:
border:給表格添加邊框
width:設置表格的寬度
height:設置表格的高度
cellpadding:設置內容居邊框的距離
cellspacing:設置邊框大小
特點 :
默認根據數據的多少進行表格的大小顯示
單元格的合並:
第一步:
首先確保表格是一個規整的表格
第二步:
根據要合並的單元格,找到其所在的源碼位置
第三步:
行合並:在要合並的單元格中第一個單元格上使用屬性rowspan="要合並的單元格的個數",並刪除其他要合並的單元格完成合並
列合並:在要合並的單元格中的任意一個上使用屬性colspan="要合並的單元格的個數",並刪除其他要合並的單元格
-->
</head>
<body>
<h3>表格標簽學習</h3>
<hr />
<h3>表格標簽的常用屬性及設置學習</h3>
<table border="1px" cellpadding="10px" cellspacing="10px">
<tr height="100px">
<th width="100px">科目</th>
<th width="100px">分數</th>
<th width="100px">級別</th>
<th width="150px">說明</th>
</tr>
<tr height="100px">
<td>java</td>
<td>100</td>
<td>8</td>
<td>面向對象的語言</td>
</tr>
<tr height="100px">
<td>C語言</td>
<td>100</td>
<td>8</td>
<td>面向過程的語言</td>
</tr>
</table>
<hr />
<h4>單元格的合並學習:</h4>
<table border="1px" cellspacing="0px">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

06-HTML-表格標簽