web前端开发与应用—

表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成：

table标签：定义一个表格
caption标签：定义表格标题，嵌套在<table></table>中
tr标签：定义表格中的一行，嵌套在<table></table>中
th标签：定义表格中的表头单元格，嵌套在<tr></tr>中
td标签：定义表格中的数据单元格，嵌套在<tr></tr>中

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示：

tr标签的基本属性

tr标签的基本属性如下图所示：

th和td标签的基本属性

th和td标签的基本属性如下图所示：

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="5px" bgcolor="00ffff" width="300">
<caption>通讯录</caption>
<tr>
<td width=100>姓名</td>
<td width=100>QQ</td>
<td width=100>电话</td>
</tr>
<tr>
<td>张三</td>
<td>123456</td>
<td>13511112222</td>
</tr>
<tr>
<td>李四</td>
<td>654321</td>
<td>13611112222</td>
</tr>
</table>
</body>
</html>

实现的效果如下图所示：

tr标签

tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式：

height

tr标签中的height属性设置行高，属性取值为具体行高的数值。

align

tr标签中的align属性设置行内单元格中文本的水平对齐方式，属性取值可以为left、center、right。

valign

tr标签中的valign属性设置行内单元格中文本的垂直对齐方式，属性取值可以为top、middle、bottom。

bgcolor

tr标签中的bgcolor属性设置行内单元格的背景颜色，属性取值可以为颜色单词或颜色代码。

background

tr标签中的background属性设置行背景图像，属性取值为背景图像的路径。

单元格整体样式

单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

cellspacing

cellspacing属性用于设置单元格之间的间隙，取值为某一数值。

cellpadding

cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙，也称为内边距，取值为某一数值。

web前端开发与应用——表格相关推荐

web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
汇总Web前端开发工程师需要注意的一些开发规范
对于正在从事Web前端开工作的人来说,了解Web前端开发规范是很重要的.因为只有这样才能保证高效快速的完成工作,今天小千就来和大家分享一下新手初学Web前端需要注意的Web前端开发规范有哪些!希望对小 ...
【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
xslt 标签取集合第一条数据_1+x证书Web前端开发中级理论考试（试卷1）
2019年下半年 Web前端开发中级理论考试 (考试时间19:00-20:30 共150分钟,测试卷1) 本试卷共3道大题,满分100分. 请在指定位置作答. 一.单选题(每小题2分,共30小题,共 ...
web前端开发——HTML学习
WEB前端开发 W3C学习网站 MDN学习网站 HTML 从语义角度,描述页面结构语言不区分大小写,特殊字符要求全小写 html5文件结构快速编辑:Tab键 <!DOCTYPE html&g ...
【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...

web前端开发与应用——表格

web前端开发与应用——表格相关推荐

最新文章

热门文章