HTML 表格 - 菜鸟教程

文章推薦指數: 80 %
投票人數:10人

表格 这个例子演示如何在HTML 文档中创建表格。

(可以在本页底端找到更多实例。

) HTML 表格. 表格由

标签来定义。

每个表格均有若干行(由 标签定义),每 ... 菜鸟教程--学的不仅是技术,更是梦想! 首页 HTML CSS JavaScript Vue Bootstrap NodeJS Python3 Python2 Java C C++ C# Go SQL Linux jQuery 本地书签 首页 HTML CSS JS 本地书签 Search Python3教程 Python2教程 Vue3教程 vue2教程 Bootstrap3教程 Bootstrap4教程 Bootstrap5教程 Bootstrap2教程 HTML教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML文本格式化 HTML链接 HTML头部 HTMLCSS HTML图像 HTML表格 HTML列表 HTML区块 HTML布局 HTML表单 HTML框架 HTML颜色 HTML颜色名 HTML颜色值 HTML脚本 HTML字符实体 HTMLURL HTML速查列表 HTML标签简写及全称 HTML总结 XHTML简介 HTML5 HTML5教程 HTML5浏览器支持 HTML5新元素 HTML5Canvas HTML5SVG HTML5MathML HTML5拖放 HTML5地理定位 HTML5Video(视频) HTML5Audio(音频) HTML5Input类型 HTML5表单元素 HTML5表单属性 HTML5语义元素 HTML5Web存储 HTML5WebSQL HTML5应用程序缓存 HTML5WebWorkers HTML5SSE HTML5WebSocket HTML5测验 HTML(5)代码规范 HTML媒体 HTML媒体(Media) HTML插件 HTML音频(Audio) HTML视频(Video)播放 HTML实例 HTML参考手册 HTML标签列表(字母排序) HTML标签列表(功能排序) HTML属性 HTML事件 HTML画布 HTML音频/视频 HTML有效DOCTYPES HTML颜色名 HTML拾色器 HTML字符集 HTMLASCII HTMLISO-8859-1 HTML符号 HTMLURL编码 HTML语言代码 HTTP消息 HTTP方法 键盘快捷键 HTML图像 HTML列表 HTML表格 HTML表格实例: FirstName LastName Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 在线实例 表格 这个例子演示如何在HTML文档中创建表格。

(可以在本页底端找到更多实例。

) HTML表格 表格由
标签来定义。

每个表格均有若干行(由标签定义),每行被分割为若干单元格(由
标签定义)。

字母td指表格数据(tabledata),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例 实例
row1,cell1 row1,cell2
row2,cell1 row2,cell2
在浏览器显示如下:: HTML表格和边框属性 如果不定义边框属性,表格将不显示边框。

有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格: 实例 Row1,cell1 Row1,cell2 HTML表格表头 表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本: 实例 Header1 Header2 row1,cell1 row1,cell2 row2,cell1 row2,cell2 在浏览器显示如下: 更多实例 没有边框的表格 本例演示一个没有边框的表格。

表格中的表头(Heading) 本例演示如何显示表格表头。

带有标题的表格 本例演示一个带标题(caption)的表格 跨行或跨列的表格单元格 本例演示如何定义跨行或跨列的表格单元格。

表格内的标签 本例演示如何在不同的元素内显示元素。

单元格边距(Cellpadding) 本例演示如何使用Cellpadding来创建单元格内容与其边框之间的空白。

单元格间距(Cellspacing) 本例演示如何使用Cellspacing增加单元格之间的距离。

漂亮的表格 HTML表格标签 标签 描述 定义表格 定义表格的行 定义表格列的组 定义用于表格列的属性 定义表格的页眉 定义表格的主体 定义表格的页脚 HTML图像 HTML列表 7篇笔记 写笔记 #0   demo  140***[email protected] 如上图的表格:tr是行数,td是单元格数,th是标题性质的td确定tr和td(th同td)的方法:1、从上到下,最细分到几行便是几个tr2、如上是三种基本单元格形式。

A是基本单元格,其余的变种都是基本单元格合并而成。

B是合并上下单元格组合而成,C是合并左右单元格。

合并后的B种单元格算到第二行第一个单元格中,C种单元格算到第四行第一个单元格中(按上表从上到下从左到右算),所以第一行6个td,第二行6个td,第三行5个td,第四行1个,第五行6个td,第六行5个td。

合并后用colspan和rowspan来标示B和C变种单元格是横向还是纵向吃了几个单元格(算他自己)3、第四种变种单元格是又横向又纵向合并,这个时候同时标示rowspan和colspan(空格隔开)合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先demo   demo  140***[email protected]年前(2017-04-28) #0   wangfeng  214***[email protected]课程表实例:https://c.runoob.com/codedemo/2902wangfeng   wangfeng  214***[email protected]年前(2017-05-20) #0   Slient  che***[email protected]表实例:https://c.runoob.com/codedemo/2913Slient   Slient  che***[email protected]年前(2017-05-24) #0   Dichter  328***[email protected]  参考地址141HTML中的table可以大致分为三个部分: thead---------表格的页眉 tbody---------表格的主体 tfoot---------定义表格的页脚 thead,tbody,tfoot相当于三间房子,每间房子都可以用来放东西。

这个标签就是放在三间房子里面的东西,每一个就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。

用表示数据的名称(标题),表示真正的数据内容。

一个简单实例:Dichter   Dichter  328***[email protected]  参考地址5年前(2017-07-12) #0   CHINA陈  252***[email protected] 表格三要素table、tr、td缺一不可。

定义表格的表头
定义表格单元
定义表格标题
标签常用属性: border="1"表格边框的宽度 bordercolor="#fff"表格边框的颜色 cellspacing="5"单元格之间的间距 width="500"表格的总宽度 height="100"表格的总高度 align="right"表格整体对齐方式(参数有left、center、right) bgcolor="#fff"表格整体的背景色 标签的常用属性: bgcolor="#fff"行的颜色 align="right"行内文字的水平对齐方式(参数有left、center、right) valign="top"行内文字的垂直对齐方式(参数有top、middle、bottom)
标签的常用属性: width="500"单元格的宽度,设置后对当前一列的单元格都有影响 height="100"单元格的高度,设置后对当前一行的单元格都有影响 bgcolor="fff"单元格的背景色 align="right"单元格文字的水平对齐方式(参数left、center、right) rowspan="3"合并垂直水平方向的单元格 colspan="3"合并水平方向单元格 valign="top"单元格文字的垂直对齐方式(参数middle、bottom、top) 引号里的数字和颜色代码均可以更改。

CHINA陈   CHINA陈  252***[email protected]年前(2019-09-25) #0   猪八戒  996***[email protected]表格结构语义标签: 1.:表格根元素。

2.:表格头。

3.:表格体。

4.:表格尾,一般可忽略该结构。

5.:表格行。

表格内容标签: 1.
:表头单元格。

2.
:表体单元格。

跨列:colspan 跨行:rowspan 单元格内边距:cellpadding 单元格外边距:cellspacing col和colgroup用于便捷定义表格指定列的样式。

猪八戒   猪八戒  996***[email protected]年前(2020-02-17) #0   菜鸟01  180***[email protected](tablehead)表头tr(tablerow)表行td(tabledate)表数据菜鸟01   菜鸟01  180***[email protected]个月前(12-01) 点我分享笔记 取消 分享笔记 昵称昵称(必填) 邮箱邮箱(必填) 引用地址引用地址 分类导航 HTML/CSSHTML教程HTML5教程CSS教程CSS3教程Bootstrap3教程Bootstrap4教程Bootstrap5教程FontAwesome教程Foundation教程JavaScriptJavaScript教程HTMLDOM教程jQuery教程AngularJS教程AngularJS2教程Vue.js教程Vue3教程React教程TypeScript教程jQueryUI教程jQueryEasyUI教程Node.js教程AJAX教程JSON教程Echarts教程Highcharts教程Google地图教程服务端Python教程Python2.x教程Linux教程Docker教程Ruby教程Java教程C教程C++教程Perl教程Servlet教程JSP教程Lua教程Rust教程Scala教程Go教程PHP教程Django教程Zookeeper教程设计模式正则表达式Maven教程Verilog教程ASP教程AppML教程VBScript教程数据库SQL教程MySQL教程PostgreSQL教程SQLite教程MongoDB教程Redis教程Memcached教程数据分析Python教程NumPy教程Pandas教程Matplotlib教程Scipy教程R教程Julia教程移动端Android教程Swift教程jQueryMobile教程ionic教程Kotlin教程XML教程XML教程DTD教程XMLDOM教程XSLT教程XPath教程XQuery教程XLink教程XPointer教程XMLSchema教程XSL-FO教程SVG教程ASP.NETASP.NET教程C#教程WebPages教程Razor教程MVC教程WebForms教程WebServiceWebService教程WSDL教程SOAP教程RSS教程RDF教程开发工具Eclipse教程Git教程Svn教程Markdown教程网站建设HTTP教程网站建设指南浏览器信息网站主机教程TCP/IP教程W3C教程网站品质 Advertisement 反馈/建议 在线实例 ·HTML实例 ·CSS实例 ·JavaScript实例 ·Ajax实例 ·jQuery实例 ·XML实例 ·Java实例 字符集&工具 ·HTML字符集设置 ·HTMLASCII字符集 ·JS混淆/加密 ·PNG/JPEG图片压缩 ·HTML拾色器 ·JSON格式化工具 ·随机数生成器 最新更新 · 如何判断JavaSc... · JavaScriptNumb... · JavaScriptNumb... · JavaScriptNumb... · JavaScriptNumb... · jQuery判断元素... · JavaScript删除... 站点信息 · 意见反馈 · 免责声明 · 关于我们 · 文章归档 关注微信 Copyright©2013-2022菜鸟教程  runoob.comAllRightsReserved.备案号:闽ICP备15012807号-1 微信关注


請為這篇文章評分?