什么是table表格?html中table表格的介绍

本篇文章给大家带来的内容是关于什么是table表格?html中table表格的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是表格?表格是由行和列排列而成的一种结构,按照行和列呈现数据,从而进行页面布局。这种布局方式已经过时。建议使用p+css实现页面布局。

如何创建HTML表格:HTML表格由table标签、caption标签以及一个或多个tr、th或td标签组成:

              1、table标签用来定义表格,整个表格包含在

和标签中;

              2、caption标签定义表格标题;

              3、tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由

和标签表示;

              4、td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对

和标签或一对

标签表示,具体的表格内容放置在这一对td标签或th标签之中,其语法如下:

        …            …        …
表格标题
1行1列的内容 1行2列的内容
2行1列的内容 2行2列的内容

注:th和td的不同:th默认是以粗体和居中的方式呈现于单元格。

table的一些常用标签属性

1、border标签属性:设定表格边框的宽度(单位:px);border属性会为每个单元格添加边框,并用边框围绕表格;如果 border 属性的值发生改变,那么只有表格周围边框的尺寸会发生变化,表格内部的边框则是1像素宽;建议使用border样式属性设置边框,不要使用border标签属性设置边框,

 2、width标签属性:设定表格的宽度,建议使用width样式属性设置表格宽度,不要使用width标签属性设置,该标签属性有多个值:

值描述pixels设置以像素计的宽度(例子:width=”50″)。%设置以包含元素的百分比计的宽度(例子:width=”50%”)。

3、align标签属性:指定表格相对于周围标签的对齐方式,建议使用float样式属性实现该效果,该标签属性有多个值:

 值描述left左对齐表格。right右对齐表格。center居中对齐表格。

4、bgcolor标签属性:指定表格背景颜色,建议使用background-color样式属性实现该效果,该标签属性有多个值:

值描述color_name规定颜色值为颜色名称的背景颜色(比如 “red”)。hex_number规定颜色值为十六进制值的背景颜色(比如 “#ff0000″)。rgb_number规定颜色值为 rgb 代码的背景颜色(比如 “rgb(255,0,0)”)。

5、cellpadding标签属性:设定单元格边界与单元格内容之间的间距(单位:px),建议使用padding样式属性实现对其效果

立即学习“前端免费学习笔记(深入)”;

6、cellspacing标签属性:指定单元格之间的间距(单位:px)

            以上列出了table标签常用的标签属性,除此之外table标签还有frame、rules和summary三个标签属性,但因为frame和rules在Internet Explorer浏览器中不支持此属性,而summary标签属性不会再浏览器中产生任何视觉效果,所以这三个标签属性忽略不讲。

tr标签属性

 1、align标签属性:设置表格行中单元格内容的水平对齐方式,该标签属性有多个值:

left左对齐内容(默认值)。right右对齐内容。center居中对齐内容。justify对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。char将内容对准指定字符。注:浏览器不支持该标签属性值

2、bgcolor标签属性:设定表格行的背景颜色,建议使用background-color样式属性实现该效果,该标签属性有多个值:

值描述color_name规定颜色值为颜色名称的背景颜色(比如 “red”)。hex_number规定颜色值为十六进制值的背景颜色(比如 “#ff0000″)。rgb_number规定颜色值为 rgb 代码的背景颜色(比如 “rgb(255,0,0)”)。

3、valign标签属性:设置表格行中单元格内容的垂直对齐方式,该标签属性有多个值:

值描述top对内容进行上对齐。middle对内容进行居中对齐(默认值)。bottom对内容进行下对齐。baseline与基线对齐。

th和td标签属性

1、align标签属性:设置单元格内容的水平对齐方式,该标签属性有多个值:

值描述left左对齐内容(td标签默认值)。right右对齐内容。center居中对齐内容(th标签默认值)。justify对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。char将内容对准指定字符。注:浏览器不支持该标签属性值

2、bgcolor标签属性:设定单元格背景颜色,建议使用background-color样式属性实现该效果,该标签属性有多个值:

值描述color_name规定颜色值为颜色名称的背景颜色(比如 “red”)。hex_number规定颜色值为十六进制值的背景颜色(比如 “#ff0000″)。rgb_number规定颜色值为 rgb 代码的背景颜色(比如 “rgb(255,0,0)”)。

3、valign标签属性:设置单元格内容的垂直对齐方式,该标签属性有多个值:

top对内容进行上对齐。middle对内容进行居中对齐(默认值)。bottom对内容进行下对齐。baseline与基线对齐。

4、width标签属性与height标签属性:设定单元格的宽度和高度,建议使用width样式属性和height样式属性设置单元格宽度和高度,不要使用width标签属性和height标签属性设置,该标签属性有多个值:

值描述pixels以像素计的宽度或高度值(比如 “100px”)。percent以包含元素百分比计的宽度或高度值(比如 “20%”)。

5、nowrap标签属性:设定单元格的内容是否换行 

 6、colspan标签属性和rowspan标签属性:分别设定单元格横跨的列数和横跨的行数

相关推荐:

html small标签是什么意思?small标签的使用方法实例

HTML font标签的color属性是什么?fontcolor的用法介绍(附颜色代码表)

以上就是什么是table表格?html中table表格的介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546666.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:29:13
下一篇 2025年12月14日 12:39:01

发表回复

登录后才能评论
关注微信