首页 > 代码库 > 16-11-11
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添加图片地址即可。
16-11-11