html制作课程表
html制作课程表
一、创建html10.8项目文件
步骤:
1.table>tr*10>td*8
2.table中添加属性如下所示:
width="900px" border="1" align="center"
3.将第一行中的td全部删除,换成th
th*8
4.将第二行中的td全部删除,换成th
th*8
5.将第一行代码设置如下所示:
<th>项目</th>
<th colspan="5" align="center">上课</th>
<th colspan="2" align="center">休息</th>
--------------------------------------------------
width宽度
border边框
align水平居中
center居中显示
colspan水平方向上合并单元格
rowspan垂直方向上合并单元格
--------------------------------------------------
详细代码入下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>课程表</title> </head> <body> <table align="center" border="1px" width="900px"> <tr align="center"> <th>项目</th> <th colspan="5" align="center">上课</th> <th colspan="2" align="center">休息</th> </tr> <tr align="center"> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr align="center"> <td rowspan="4" align="center">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4" align="center">休息</td> </tr> <tr align="center"> <td>语文</td> <td>英语</td> <td>物理</td> <td>数学</td> <td>语文</td> <td>计算机</td> </tr> <tr align="center"> <td>语文</td> <td>英语</td> <td>物理</td> <td>数学</td> <td>语文</td> <td>计算机</td> </tr> <tr align="center"> <td>语文</td> <td>英语</td> <td>物理</td> <td>数学</td> <td>语文</td> <td>计算机</td> </tr> <tr align="center"> <td colspan="8" height="20"></td> </tr> <tr align="center"> <td rowspan="3" align="center">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="3" align="center">休息</td> </tr> <tr align="center"> <td>语文</td> <td>英语</td> <td>物理</td> <td>数学</td> <td>语文</td> <td>计算机</td> </tr> <tr align="center"> <td>语文</td> <td>数学</td> <td>物理</td> <td>英语</td> <td>语文</td> <td>计算机</td> </tr> </table> </body> </html>
如下所示:
添加边框,和边框颜色,如下所示:
border="6px" bordercolor="#ff6600"
还没有留言,还不快点抢沙发?