休息了一天,总结一下前天讲的新内容,主要了解了一些文字样式,重点是表格的制作。

  先总结一下制作表格要接触的命令:表格<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添加图片地址即可。