16-11-11

  休息了一天,總結一下前天講的新內容,主要了解了一些文字樣式,重點是表格的製作。

  先總結一下製作表格要接觸的命令:表格<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添加圖片地址即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章