HTML 表格
HTML 表格：
表格由<table>标签来定义，行数由<tr>标签来定义，单元格由<td>标签来定义；
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格和边框属性：
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器中显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 2
<html>
<body>
<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>
</body>
</html>
<!各种边框>
<html>
<body>
<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>
<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
表格中的heading（表头）
<html>
<body>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<!空单元格>
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
</body>
</html>
<!带有标题的表格>
<html>
<body>
<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>
</body>
<!跨行或跨列的表格单元格>
<html>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
<!表格内的标签>
<html>
<body>
<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>
</body>
</html>
<!单元格的边距>
<html>
<body>
<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>
</body>
</html>
<!单元格的间距>
<html>
<body>
<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>
</table>
</body>
</html>
<!给表格设置背景颜色和背景图案>
<html>
<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="/i/eg_bg_07.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<!给单元格添加背景颜色和背景图案>
<html>
<body>
<h4>单元背景：</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/i/eg_bg_07.gif">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<!表格中的内容排列>
<html>
<body>
<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.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
<!框架frame属性>
<html>
<body>
<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>
</body>
</html>
表格标签：
表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
HTML 表格的更多相关文章
- HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列
在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...
- HTML——表格table标签，tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- table的thead,tbody,tfoot
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...
- table样式测试总结tr td宽度分析
题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...
- table标签修改tr,td标签的行距
修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...
- thead tbody tfoot
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...
- html5 表格标签 table tr td
最重要的三个 <table> 表格声明标签 属性: boarder 边框粗细 style 可配合css 使用 <tr> 行标签 table row ...
随机推荐
- maven项目管理利器
一.maven介绍及环境搭建 maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建.报告和文档的软件项目管理工具. maven可以更有效的管理项目,也是一套功能强大的自动化管 ...
- Mysql EF Code First
1.更新程序包EntityFramework->6.1.3 2.下载程序包MySql.Data.Entities(Ver:6.8.3) 3.修改config.cs或者web.config,包含以 ...
- Hibernate面试题收藏
hibenate的面试总结. 可能现在大家常常还会遇到一个些面试的时候问一些关于hibernate的问题,我个人觉得,这些东西一般做过开发的人在使用上没有任何的问题的,但是如果是要你来说就不一定能够说 ...
- Hello, RealSense!
这是kinect for windows: 这是华硕 xtion pro: 这是Intel® RealSense™: 几经周折,终于买到了,99美元套件+25美元运费,正在旅途中.
- Android 与Unity交互之Toast消息
Toast.makeText(MainActivity.this,message.obj.toString(),Toast.LENGTH_SHORT).show();这一句代码不能直接放在 publi ...
- Intellj IDEA Java随笔
敲击sout+Tab会出现:System.out.println(); int(-2147483648, 2147483647) 当一个方法类型不是void时,那么我们不仅要考虑它正确时的返回值,错误 ...
- zepto插件 countdown 倒计时插件 从jquery 改成 zepto
插件特色:支持zepto库 支持时间戳格式 支持年月日时分秒格式 countdown 由jquery依赖库改成zepto zepto的event机制与jquery不同,所以更换之后代码不能正常运行 ...
- SQLServer将表数据导出为Insert语句
从网上找到的方法,不过很不错,记录下来,也算是分享下~~ 有一个表,city,有列:cityID,cityName;将此表中所有数据,变为insert语句 select 'insert into ta ...
- C#联机获取公网IP
C#获取IP的方式有很多种,这里通过http://www.ipip.net/这个稳定的在线IP库的来获取公网IP. string tempip = "0.0.0.0"; WebRe ...
- 使用if else if else 统计计算
package review20140419;/* * 统计一个班级的成绩,并统计优良中差和不及格同学个数以及求平均分 */public class Test2 { //程序的入口 pub ...