休息了一天,總結一下前天講的新內容,主要了解了一些文字樣式,重點是表格的製作。
先總結一下製作表格要接觸的命令:表格<table>、表頭<th>、行<tr>、列<td>、合併兩行單元格<colspan>,合併兩列單元格<rowcolspan>、字號<front-size>、表格背景圖片<background-image>。
下以製作課程表爲例說明:
<!DOCTYPE html>
<html>
<head>
<title>課程表</title>
<style>
caption{
/*字號*/
font-size:30px;
color: blue;
}
#a{
width: 250px;
height: 50px;
color: red;
background-color: grey;
}
.same{
width: 250px;
text-align: center;
line-height: 50px;
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 表格 -->
<table width="750px" height="350px" border="1px">
<!-- 表格標題 -->
<caption>課程表</caption>
<!-- 表頭 這裏給搜索引擎看 -->
<thead>
<!-- 行 -->
<tr id="a">
<!-- 表頭 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 表格 這裏給搜索引擎看 -->
<tbody>
<tr class="same">
<!-- 列 -->
<td>數學</td>
<td>語文</td>
<td>英語</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr class="same">
<td>生物</td>
<td>政治</td>
<td>美術</td>
<td>地理</td>
<td>歷史</td>
</tr>
<tr class="same">
<td>音樂</td>
<td>體育</td>
<td>數學</td>
<td>語文</td>
<td>英語</td>
</tr>
<tr class="same">
<td>化學</td>
<td>物理</td>
<td>生物</td>
<td>音樂</td>
<td>地理</td>
</tr>
<tr class="same">
<td>政治</td>
<td>美術</td>
<td>歷史</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr class="same">
<td>化學</td>
<td>政治</td>
<td>物理</td>
<td>歷史</td>
<td>數學</td>
</tr>
</tbody>
</table>
</body>
</html>
表格合併單元格只需在想要合併的<tr>或<th>中加入合併屬性,再加上想要合併的行或列的數字即可。想要爲表格添加背景圖片加入<background-image>命令然後url添加圖片地址即可。