表格
表格由 <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. jquery带小图的图片轮换效果

    右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...

  2. easyui-combobox select 设置不分行（只显示在一行）

    使用easyui 1.4.4 <select id="hotalid" class="easyui-combobox" data-options=&quo ...

  3. UIImagePikerController 浅析

    原文链接:http://www.jianshu.com/p/2ac85aca4468 UIImagePickerController是iOS系统提供的和系统的相册和相机交互的一个类,可以用来获取相册的 ...

  4. angular.js_$scope

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. Angular ...

  5. HDU 2671 Can't be easier

    简单的几何题目 点(a,b)关于直线Ax+By+C=1对称点的公式 #include<cstdio> #include<cstring> #include<cmath&g ...

  6. 利用工具MailUtils实现邮件的发送,遇到的大坑,高能预警!!

    java实现邮件的发送依赖的jar包有两个:mail.jar和activation.jar,我也找到了一个工具包:itcast-tools-1.4.jar,实现原理大家可以查看源码,先放出资源链接 h ...

  7. Chapter 1 First Sight——21

    They were sitting in the corner of the cafeteria, as far away from where I sat as possible in the lo ...

  8. PHP开发利器zend studio常见问题解答

    1.如何将zend studio 9的默认GBK编码设置为其它编码,例如UTF-8? 选择window菜单->Preferences->General->Workspace,在界面当 ...

  9. [学习opencv]高斯、中值、均值、双边滤波

    http://www.cnblogs.com/tiandsp/archive/2013/04/20/3031862.html [学习opencv]高斯.中值.均值.双边滤波 四种经典滤波算法,在ope ...

  10. java打jar包

    一.打包jar文件 1      如果是class文件     jar cvf myjar.jar Foo.class Bar.class 如果是包     jar cvf myjar.jar pac ...