用SublimeText2制作网页中的表格

来源：互联网发布：编程儿童编辑：程序博客网时间：2024/06/08 02:57

一个网页有时候总是会有表格的，所以，制作表格的技能我们当然是要get的。

首先，先来表格的标签属性吧

表格标签属性标签描述<table>定义表格<caption>定义表格标题<th>定义表格中的表头单元格<tr>定义表格中的行<td>定义表格中的单元<thead>定义表格中的表头内容<tbody>定义表格中的主体内容<col>定义表格中的一个或多个列的属性<tfoot>定义表格中的表注内容（脚注）<colqroup>定义表格中供格式化的列组

下面，就先来一组代码

<span style="font-size:14px;"><!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" ellspacing="0" cellpadding="5"><caption>成绩单</caption><tr><td>姓名</td><td>性别</td><td>成绩</td>    </tr>    <tr><td>张三</td><td>男</td><td>89</td>    </tr>    <tr><td>李四</td><td>男</td><td>88</td></tr></body></html></span>

效果图：

一张简单的表格就做好了。接下来就来讲一些比较复杂的表格

<span style="font-size:14px;"><!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" ellspacing="0" cellpadding="5"><caption>维修项目增补单</caption><tr><th>工单号</th><th>001</th><th>车牌号</th><th>浙D3378</th><th>车型</th><th>奥迪A8</th><th>技师</th><th>张三</th><th>检修时间</th><th>2015-3-27</th></tr><tr><th>序号</th><th colspan="2">维修项目及更换配件</th><th>单价</th><th>数量</th><th>小计</th><th>工时费</th><th>合计</th><th colspan="2">故障原因</th></tr><tr><th>1</th><th colspan="2"></th><th></th><th></th><th></th><th></th><th></th><th colspan="2"></th></tr><tr><th>2</th><th colspan="2"></th><th></th><th></th><th></th><th></th><th></th><th colspan="2"></th></tr><tr><th>3</th><th colspan="2"></th><th></th><th></th><th></th><th></th><th></th><th colspan="2"></th></tr><tr><th align="left" colspan="3">备件费用小计：</th><th align="left" colspan="5">工时费用小计：</th><th align="left" colspan="2">合计：</th></tr></body></html></span>

效果图：

2 0