一、使用到的标签用法介绍

1. 整体表格结构说明

<table border="1px" cellspacing="0"><col width="200px"><tr align="center">...</tr> <td>...</td>
</table>

table标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr元素定义表格行，th元素定义表头，td元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
< col width=“200px”>表示一列单元格的宽度为200像素
border="1px"为边框属性，cellspacing使用单元格间距增加单元格之间的距离，align="center"为文字居中对齐

2. 针对table的属性说明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" cellspacing="0"><col width="200px"><col width="200px"><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table><br><table border="2px" cellspacing="1"><col width="200px"><col width="200px"><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table></body>
</html>

对比table1和table2，区别border和cellspacing属性

table1中border值为1px，则其表格边框像素为1，cellspacing属性值为0，则此表格中各单元格之间间隙为0
table2中border值为2px，则其表格边框像素为2，cellspacing属性值为1，则此表格中各单元格之间存在间隙为1像素

二、表格制作简单代码实现

制作大小为5*5的表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h3>前端技术阶段划分标准</h3><table border="1px" cellspacing="0"><thead>标准表</thead><tbody><col width="200px"><!--每列的宽度--><col width="200px"><col width="200px"><col width="200px"><col width="200px"><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>被产品怼的不像话</td><td>跟产品互怼不相上下</td><td>怼的产品没话说</td><td>直接将其怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户C</td><td></td><td></td><td></td><td></td></tr></tbody><tfoot>表1</tfoot></table></body>
</html>

三、输出结果示例

四、其他table属性标签

1.标签介绍

表格整体框架：

<table><thead>表格页眉</thead><tbody>表格主体</tbody><tfoot>表格页脚</tfoot>
</table>

表示单元格前六列的宽度：

<colgroup span="6" width="200px">

合并单元格

< th colspan=“7”>…< /th>
colspan 设置单元格可横跨的列数。

2.制作简单个人简历

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" cellspacing="0"><tbody><colgroup span="7" width="100px"><tr height="40px" align="center"><th colspan="7">个人简历</th></tr><tr height="40px" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40px" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px" align="center"><td>求职意向</td><td colspan="6"></td></tr></colroup></tbody></table></body>
</html>

3.结果显示

html表格标签＜table＞相关推荐

充分使用表格标签(Table)
充分使用表格标签(Table) 2007-11-06 12:24 阅读5 评论0 table,caption,thead,tr,th,td,tbody,tfoot table,caption, ...
8.HTML标签-表格标签table
HTML标签-表格标签table 文章目录 HTML标签-表格标签table 一. 表格基础. 1.表格的功能. 2.表格的常用标签. 3.表格的常用属性. 二.代码展示三.代码效果一. 表格基础 ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
HTML表格标签(table)
table标签简介: tabale标签是表格标签,html中较为常用的标签之一,主要用来制作表格,完成一些对比和统计工作 table具体使用: 1.创建一个表格 2.tr.td.th标签的作用: 2. ...
表格标签 table标签 tr标签单元格间距单元格居中加粗表单居中
table标签 table标签是表格标签用这个可以创建一个表格在标签中可以设置表格的相关属性 tr标签和td标签一个<tr></tr>标签代表一行一个<td> ...
html5中的td tr,html5 表格标签 table tr td
最重要的三个属性: boarder 边框粗细 style 可配合css 使用行标签 table row 有表就可以建行单元格标签 table data 有行就可以建数据 ...
前端:HTML/05/lt;meta标记,XHTML简介及其编写规范,表格标签(lt;table)及其相关标签(lt;tr,lt;td或lt;th)
<meta>标记 <meta>的主要作用,是提供网页的元信息,如:指定网页的搜索关键字两个属性:http-equlv和name; 1,http-equiv属性:模拟http协 ...
定义表格标签（table）
前言:定义表格标签是一个标签,是以html的形式写出来的,不需要设置样式也可以写出表格的样式,如果想要更好的样式,也可以用css来设置. 目录一.定义表格标签的基本属性及属性值 1.tr 代表行 2 ...
html的表格分组标签简述优点,表格标签（table）深入了解
表格标签(table)深入了解互联网发布时间:2008-10-17 18:47:11 作者:佚名我要评论表格(table)是一直以来长期被大家使用的标签,直到现在还是在用,不过呢因 ...
html表格重置标签,HTML——表格标签
存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理.显示表格式数据. 表格的应用场景: 1 创建表格在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本 ...

html表格标签＜table＞

文章目录

一、使用到的标签用法介绍

1. 整体表格结构说明

2. 针对table的属性说明

二、表格制作简单代码实现

三、输出结果示例

四、其他table属性标签

1.标签介绍

2.制作简单个人简历

3.结果显示

html表格标签＜table＞相关推荐

最新文章

热门文章