HTML学习（七）表格

表格
表格由 <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学习（七）表格的更多相关文章

MyBatis学习七：spring和MyBatis整合
<\mybatis\day02\16mybatis和spring整合-sqlSessionFactory配置.avi;> MyBatis学习七:spring和MyBatis整合.逆向工程 ...
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
day 85 Vue学习七之vue-cookie
Vue学习七之vue-cookie 通过vue如何操作cookie呢参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies ...
（转）MyBatis框架的学习(七)——MyBatis逆向工程自动生成代码
http://blog.csdn.net/yerenyuan_pku/article/details/71909325 什么是逆向工程 MyBatis的一个主要的特点就是需要程序员自己编写sql,那么 ...
ExtJS4.2学习(七)EditorGrid可编辑表格(转)
鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...
Android应用开发学习之表格视图
作者:刘昊昱博客:http://blog.csdn.net/liuhaoyutz 本文我们来学习一个使用表格视图的程序,下图是该程序的运行效果: 该程序主Activity文件内容如下: packag ...
MySql学习(七) —— 查询性能优化深入理解MySql如何执行查询
本篇深入了解查询优化和服务器的内部机制,了解MySql如何执行特定查询,从中也可以知道如何更改查询执行计划,当我们深入理解MySql如何真正地执行查询,明白高效和低效的真正含义,在实际应用中就能扬长避 ...
Bootstrap基础学习(一)—表格与按钮
一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...
Linux 学习 (七) 挂载命令 & 用户登陆查看
Linux达人养成计划 I 学习笔记挂载命令 mount:查询系统中已经挂载的设备 mount -a:根据配置文件 /etc/fstab 的内容,自动挂载 mount [-t 文件系统] [-o 特 ...
Python3.5 学习七
心灵鸡汤好书推荐:消费者行为学.围城.活着.盲井.三体.北京折叠静态方法: @staticmethod #名义上归类管,和类没什么关系,只是引用用"." 在静态方法中,无法访问 ...

随机推荐

Tomcat服务器
常见的web服务器 1. WebLogic是BEA公司的产品,是目前应用最广泛的web服务器,支持J2EE规范(J2EE里有13种技术),商业产品,收费的.银行,证券等对并发,安全要求高的时候用,一般 ...
包(package)
防止文件重名,包体现在文件夹上.包必须建立文件夹. 类名的全称是:包名.类名 javac xx.java 命令编译的时候,不会建立对应的文件夹, 建立包对应的文件夹的命令,要用 javac -d ...
php 四种基础算法 ---- 快速排序法
4.快速排序法代码: function quick_sort($arr) { //先判断是否需要继续进行 $length = count($arr); if($length < ...
mysql问题总结，远程登录
http://blog.sina.com.cn/s/blog_4550f3ca0101axzd.html 更改mysql数据库的数据库名 http://tech.sina.com.cn/s/s/200 ...
jQuery checkbox 全选
jQuery 1.6版本以后 if($("#id").attr("checked")) 不能返回 ture 和 false 高版本中jQuery 提供prop ...
PAT (Advanced Level) 1110. Complete Binary Tree (25)
判断一棵二叉树是否完全二叉树. #include<cstdio> #include<cstring> #include<cmath> #include<vec ...
在web项目中使用cxf开发webservice，包含spring支持
本文主要介绍了,如何使用cxf内置的例子,学会开发webserivce,在web项目中使用,且包含spring支持. webserivce的开发可以使用cxf或者axis,好像还有httpclient ...
Mysql命令-以NULL做where条件过滤时应该写 IS NULL;
以NULL做where条件过滤时应该写 IS NULL;SELECT * FROM pet WHERE death IS NULL; SELECT * FROM pet WHERE death IS ...
php源码分析之PHPAPI宏的作用
在PHP源码中,我们经常会看到很多函数前面有个PHPAPI,但这是什么呢? 于是我在php源码/main/php.h中找到了它的定义 #ifdef PHP_WIN32 # include " ...
win7 系统保留分区 BCDedit
系统保留分区简介编辑 “系统保留”分区示意图 Windows Vista/7出于安全考虑,在新装Windows Vista/7系统过程中,如果利用光盘的分区工具给硬盘分区时,系统默认的将一部分(100 ...

HTML学习（七）表格

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

随机推荐

热门专题