表格
表格由 <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. pipe的实现

    本文进行了详细的描述,http://blog.csdn.net/zhouhong1026/article/details/8151235

  2. sql server 2005导出数据

    */ EXEC sp_configure 'show advanced options', 1 GO */     配置选项 'show advanced options' 已从 0 更改为 1.请运 ...

  3. Cocos2d 使用控制台打印的方法

    1.打开当前项目的win32解决方案. 2.在解决方案管理器的win32文件夹下打开main.cpp 3.增加以下代码: #define USE_WIN32_CONSOLE //以下加到入口函数 #i ...

  4. android 5.0新特性学习--视图轮廓

    ViewOutlineProvider -- 视图轮廓setOutlineProvider--可以使用View.setClipToOutline方法去剪切一个视图的outline区域.只有rectan ...

  5. PAT (Advanced Level) 1106. Lowest Price in Supply Chain (25)

    简单dfs #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...

  6. Codeforces Round #366 (Div. 2) C. Thor （模拟）

    C. Thor time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  7. Ubuntu vim显示行号语法高亮自动缩进

    配置文件名为Ubuntu vimrc在Fedora中vim的配置文件存放在/etc目录中,配置文件名为Ubuntu vimrc在终端 输入以下命令来编辑Ubuntu vimrc配置文件:sudo vi ...

  8. Android SharedPreferences存图片，转码解码图片

    保存图片  首先创建ByteArrayStream对象,然后用BitmapFactroy把图片加载进来,然后compress压缩图片到流,  然后toByteArray()就行了 public voi ...

  9. 安卓开发之探秘蓝牙隐藏API（转）

    源:http://www.cnblogs.com/xiaochao1234/p/3793172.html 上次讲解Android的蓝牙基本用法,这次讲得深入些,探讨下蓝牙方面的隐藏API.用过Andr ...

  10. Java中的字符串分割 .

    转自 http://blog.csdn.net/yuwenhao0518/article/details/7161059 http://longkm.blog.163.com/blog/static/ ...