HTML 表格实例
1.表格这个例子演示如何在 HTML 文档中创建表格。
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
2.表格边框
本例演示各种类型的表格边框。 ###border="1" 加粗和加深边框,值越大越好
<h4>带有普通的边框:</h4>
<table border="1">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> <h4>带有粗的边框:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
3.没有边框的表格
本例演示一个没有边框的表格。 border="1" #等于1 是有边框的, 等于0 就没有边框了
<h4>这个表格没有边框</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table> 4.表格中的表头(Heading)
本例演示如何显示表格表头。
<h1>表格中的表头</h1>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
</tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td> 男</td>
</table> <h4>垂直表头</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>邹立翔</td>
</tr>
<tr>
<th>电话</th>
<td>1234545</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
</table>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table> 32.带有标题的表格
本例演示一个带标题 (caption) 的表格
<h4>这个表格有一个标题,以及粗边框</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
33.跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。 ##colspan ="2" 跨两列
<h4>横向两列的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>邹立翔</td>
<td>123213</td>
<td>223434</td>
</tr>
##################
<h4>横跨两行的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>邹立翔</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>2132432</td>
</tr>
<tr>
<td>2434343</td>
</tr>
</table>
34.表格内的标签
本例演示如何显示在不同的元素内显示元素。
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table> 35.单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
<h4>没有 cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> <h4>带有 cellpadding</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> 36.单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
<h4>没有 cellspacing</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>ROW</td>
</tr>
</table>
<h4>带有 cellspacing</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>ROW</td>
</tr> 37.向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
<body>
<h4>背景颜色</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> <h4>背景图像</h4>
<table border="1"
background="1.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> 38.向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
<h4>单元背景</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="1.png">
Sedcond</td>
<td>Row</td>
</tr>
</table> 39.在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
<table width="400" border="1">
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241</td>
<td align="right">$200</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30</td>
<td align="right">$40</td>
</tr>
<tr>
<td align="f=left">食物</td>
<td align="right">$730</td>
<td align="right">$650</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1200</th>
<th align="right">$744</th>
</tr>
</table> 40.框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
<p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p> <p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML 表格实例的更多相关文章
- W3School-CSS 表格实例
CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- VBA嘘嘘嘘(1)——将Excel数据填入到已存在的Word模板表格(实例应用)
傻瓜可以写出机器读懂得代码,但写出让人能读懂的代码的是优秀程序员 Sub 填充() Application.ScreenUpdating = False 'ScreenUpdating 是控制你的ex ...
- servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例
写在前面:1.源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格2.json解析,用eval()3 ...
- jquery 操作表格实例
案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()) Html: <h4>1.隔行变行</h4> ...
- 从json传递数据显示表格实例
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate> { UITableView* table; ...
- W3School-CSS 伪元素 (Pseudo-elements) 实例
CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin ...
- W3School-CSS 伪类 (Pseudo-classes) 实例
CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...
- W3School-CSS 定位 (Positioning) 实例
CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...
随机推荐
- js实现双向链表
1.概念 上一个文章里我们已经了解到链表结构,链表的特点是长度不固定,不用担心插入新元素的时候新增位置的问题.插入一个元素的时候,只要找到插入点就可以了,不需要整体移动整个结构. 这里我们了解一下双向 ...
- pvr.ccz 与 png 格式 互转的解决方案
pvr.ccz与png互转 pvr是苹果的一种图片格式,我们需要转成png,最简单的办法就是用TexturePacker. 准备工作 TexturePacker :http://www.codeand ...
- C# 颜色对照表
参考资料 :https://www.cnblogs.com/msgarden/p/4949272.html Color.AliceBlue 240,248,255 Color.LightSalmon ...
- How to display values with in piechart using Jfreechart(values in sector )
I am using Jfreechart to create pie charts. Values are displayed outside pie chart as labels. I want ...
- 《深入理解JVM》读书笔记
目前只是整理了书的前几章,把jvm的内存划分简要说明.垃圾回收算法.垃圾回收器.常用的命令和工具进行说明.命令和工具的使用找个时间需要详细按步骤截图说明. 还有一部分内容是举例说明了一下字节码指令的样 ...
- 2298: [HAOI2011]problem a
Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) 这句话的意思就等于是说第i个 ...
- 如何用IDEA http://localhost:8080/不带上项目名访问
IDEA TOMCAT设置中把这里的项目名去掉即可
- Python 函数(二)
Python 3 函数(匿名函数.偏函数 and 变量作用域:全局变量.局部变量) 一.匿名函数:没有名字,也不再使用 def 语句这样标准的形式定义的一个函数. OCP培训说明连接:https:// ...
- C++之语言概述
C++语言是广泛使用的程序设计语言之一,因其特有的优势在计算机应用领域占有重要一席. C语言的发展 20世纪70年代初,贝尔实验室的Dennis Richie 等人在B语言基础上开发出C语言,最初是作 ...
- POJ 1094 Sorting It All Out(拓扑排序+判环+拓扑路径唯一性确定)
Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 39602 Accepted: 13 ...