首页 web前端 html教程 什么是table表格?html中table表格的介绍

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

Aug 23, 2018 am 11:04 AM

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

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

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

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

标签中;

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

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

              4、td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对和标签或一对和标签表示,具体的表格内容放置在这一对td标签或th标签之中,其语法如下:

<table>
	<caption>表格标题</caption>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>
登录后复制

注: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表格的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

网页批注如何实现Y轴位置的自适应布局? 网页批注如何实现Y轴位置的自适应布局? Apr 04, 2025 pm 11:30 PM

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

在router文件夹下的index.js文件中为什么需要调用Vue.use(VueRouter)? 在router文件夹下的index.js文件中为什么需要调用Vue.use(VueRouter)? Apr 05, 2025 pm 01:03 PM

在router文件夹下的index.js文件中注册VueRouter的必要性在开发Vue应用程序时,常常会遇到关于路由配置的问题。特�...

See all articles