用SublimeText2制作网页中的表格

最新推荐文章于 2023-04-12 19:41:09 发布

没有耳朵的猫

最新推荐文章于 2023-04-12 19:41:09 发布

阅读量6.7k

点赞数 3

分类专栏：网页

本文链接：https://blog.csdn.net/GnauhNait/article/details/44676821

版权

网页专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一个网页有时候总是会有表格的，所以，制作表格的技能我们当然是要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>

效果图：

没有耳朵的猫

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
用SublimeText2制作网页中的表格

一个网页有时候总是会有表格的，所以，制作表格的技能我们当然是要get的。首先，先来表格的标签属性吧表格标签属性标签描述定义表格定义表格标题定义表格中的表头单元格定义表格中的行定义表格中的单元定义表格中的表头内容定义表格中的主体内容定
复制链接

扫一扫

专栏目录