表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<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>

 表格标签

<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。

<colgroup> 定义表格列的组。

例1.本例演示如何显示表格表头。

<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>

例2.本例演示一个带标题 (caption) 的表格

<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>

例3.本例演示如何定义跨行或跨列的表格单元格。

<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>

例4.本例演示如何显示在不同的元素内显示元素。

<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>

例5.本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

<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>

例6.本例演示如何使用 Cell spacing 增加单元格之间的距离。

<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>

例7.本例演示如何向表格添加背景。

<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>

例8.本例演示如何向一个或者更多表格单元添加背景。

<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>

例9.本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

<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>

例10.本例演示如何使用 "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>

HTML学习（七）表格的更多相关文章

  1. MyBatis学习七：spring和MyBatis整合

    <\mybatis\day02\16mybatis和spring整合-sqlSessionFactory配置.avi;> MyBatis学习七:spring和MyBatis整合.逆向工程 ...

  2. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. day 85 Vue学习七之vue-cookie

      Vue学习七之vue-cookie   通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies ...

  4. （转）MyBatis框架的学习(七)——MyBatis逆向工程自动生成代码

    http://blog.csdn.net/yerenyuan_pku/article/details/71909325 什么是逆向工程 MyBatis的一个主要的特点就是需要程序员自己编写sql,那么 ...

  5. ExtJS4.2学习(七)EditorGrid可编辑表格(转)

    鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...

  6. Android应用开发学习之表格视图

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 本文我们来学习一个使用表格视图的程序,下图是该程序的运行效果: 该程序主Activity文件内容如下: packag ...

  7. MySql学习(七) —— 查询性能优化 深入理解MySql如何执行查询

    本篇深入了解查询优化和服务器的内部机制,了解MySql如何执行特定查询,从中也可以知道如何更改查询执行计划,当我们深入理解MySql如何真正地执行查询,明白高效和低效的真正含义,在实际应用中就能扬长避 ...

  8. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  9. Linux 学习 (七) 挂载命令 & 用户登陆查看

    Linux达人养成计划 I 学习笔记 挂载命令 mount:查询系统中已经挂载的设备 mount -a:根据配置文件 /etc/fstab 的内容,自动挂载 mount [-t 文件系统] [-o 特 ...

  10. Python3.5 学习七

    心灵鸡汤 好书推荐:消费者行为学.围城.活着.盲井.三体.北京折叠 静态方法: @staticmethod #名义上归类管,和类没什么关系,只是引用用"." 在静态方法中,无法访问 ...

随机推荐

  1. iOS开发frame, contentSize, contentOffset, contentInset 区别联系浅析

    1. 概述 iOS开发中,必然会涉及到布局相关问题,frame,bounds,contenSize,contentOffset,contentInset这几个布局相关概念让许多初学者感到困惑.虽然初步 ...

  2. win8.1点击“更改电脑设置”无反应（闪退）

    系统:win8.1 专业版 症状:win键+C → 设置 → 更改电脑设置,无反应. 尝试办法: 1.SFC /scannow扫描修复,扫描出错误但无法修复.因为曾经为了节省空间,用DISM++清理了 ...

  3. c语言判断打开文件是否为空的方法

    void writeReslut2(char* caseName,double averageTime,double max, double min,int loops,int size){ fpos ...

  4. Jenkins+SonarQube代码质量检查自动化

    基础概念百度百科:Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括:1.持续的软件版本发布/测试项目.2.监控外部调用执行的工作.前面[Sonarqube 代码质量 ...

  5. debug运行可以，release运行报错的原因及修改方法

    通常我们开发的程序有2种模式:Debug模式和Release模式在Debug模式下,编译器会记录很多调试信息,也可以加入很多测试代码,方便我们程序员测试,以及出现bug时的分析解决Release模式下 ...

  6. acm课程练习2--1013（同1014）

    题目描述 There is a strange lift.The lift can stop can at every floor as you want, and there is a number ...

  7. HDU 2102 A计划 经典搜索

    A计划 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  8. ubuntu apache2 流量限制模块

    mod-bw is an Apache 2 module provided to solve the problem of limiting users’ and virtual hosts’ ban ...

  9. zencart hosts本地解析

    C:\WINDOWS\system32\drivers\etc\hosts 127.0.0.1  www.aberc220.com   别人 192.168.1.64 www.aberc220.com ...

  10. 解决 Oracle 11g 不能导出空表的问题

    --解决 Oracle 11g 不能导出空表的问题 --执行下面语句,查询数据库中的空表,同时产生分配空间.把生成的结果复制出来并执行. select 'alter table '||table_na ...