本章目标:了解掌握表格的基本结构<table><tr><th><td>
掌握跨行、跨列属性colspan
rowspan
掌握表格相关修饰属性border
width height bgcolor background height cellpadding cellspacing

本章重点:掌握表格的基本结构及相关属性

本章难点:掌握跨行、跨列属性colspan rowspan

一、   
HTML 表格

表格:

表格是用<table>标签定义的。表格被划分为行(使用<tr>标签),每行又被划分为数据单元格(使用<td>标签)。td表示“表格数据”(Table Data),即数据单元格的内容。数据单元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。想不想尝试一下?

表格和border属性:

如果不指定border属性,表格将不显示边框。有时候这很有用,但是多数时候我们希望显示边框。

表格头:

表格头使用<th>标签指定。

表格中的空单元格

在多数浏览器中,没有内容的单元格显示得不太好。

注意一下空单元格的边框没有显示出来。为了避免这个,可以在空单元格里加入不可分空格来占位,这样边框能正常显示。

基本注意点——有用的技巧

通常很少使用<thead>,<tbody>,<tfoot>标签,因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。

更多示例:

没有边框的表格:

<html>

<body>

<h4>This table has no
borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

<h4>And this table has no
borders:</h4>

<table border="0">

<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>Table headers:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill
Gates</td>

<td>555
77 854</td>

<td>555
77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First
Name:</th>

<td>Bill
Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555
77 854</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555
77 855</td>

</tr>

</table>

</body>

</html>

有标题的表格:

<html>

<body>

<h4>

This table has a caption,and a thick border:

</h4>

<table border="6">

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

单元格跨行(列)的表格:

<html>

<body>

<h4>Cell that spans two columns:</h4>

<table border="1">

<tr>

<th>Name</th>

<th
colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill
Gates</td>

<td>555
77 854</td>

<td>555
77 855</td>

</tr>

</table>

<h4>Cell that spans two
rows:</h4>

<table border="1">

<tr>

<th>First
Name:</th>

<td>Bill
Gates</td>

</tr>

<tr>

<th
rowspan="2">Telephone:</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>This
is a paragraph</p>

<p>This
is another paragraph</p>

</td>

<td>This
cell contains a table:

<table
border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>This
cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

给表格增加背景色或者背景图像:

<html>

<body>

<h4>A background color:</h4>

<table border="1"
bgcolor="red">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>A background image:</h4>

<table border="1"
background="/images/bgdesert.jpg">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何给表格增加背景。

<html>

<body>

<h4>Cell backgrounds:</h4>

<table border="1">

<tr>

<td
bgcolor="red">First</td>

<td>Row</td>

</tr>

<tr>

<td
background="/images/bgdesert.jpg">Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何给一个或多个单元格增加背景。

cellpadding属性:

<html>

<body>

<h4>Without cellpadding:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

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

这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。

cellspacing属性:

<html>

<body>

<h4>Without cellspacing:</h4>

<table border="1">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

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

这个例子说明了如何使用cellspacing属性来增加单元格间距。

给单元格内容设置对齐方式:

<html>

<body>

<table width="400"
border="1">

<tr>

<th
align="left">Money spent on....</th>

<th
align="right">January</th>

<th
align="right">February</th>

</tr>

<tr>

<td
align="left">Clothes</td>

<td
align="right">$241.10</td>

<td
align="right">$50.20</td>

</tr>

<tr>

<td
align="left">Make-Up</td>

<td
align="right">$30.00</td>

<td
align="right">$44.45</td>

</tr>

<tr>

<td
align="left">Food</td>

<td
align="right">$730.40</td>

<td
align="right">$650.00</td>

</tr>

<tr>

<th
align="left">Sum</th>

<th
align="right">$1001.50</th>

<th
align="right">$744.65</th>

</tr>

</table>

</body>

</html>

这个例子说明了如何使用“align”属性来设置单元格的对齐方式,让表格好看一些。

用HTML创建表格的更多相关文章

  1. Hive创建表格报【Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException】引发的血案

    在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache ...

  2. 示例-创建表格-指定行列&删除表格的行和列

    <body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...

  3. 示例-创建表格&使用表格对象

    @charset "utf-8";/* CSS Document */table{ border:#249bdb 1px solid; width:500px; border-co ...

  4. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  5. 如何利用Dreamwever快速创建表格???

    这样的一张表,用table写完感觉好累,很多单元格都不一样大,还要单独设置样式,今天还分享下用Dreamwever快速创建表格. 可能这会有人知道了!当然是插入表格了!

  6. [原创]Devexpress XtraReports 系列 2 创建表格报表

    昨天发表了Devexpress XtraReports系列开篇,今天我们继续. 今天的主题是创建表格报表. 首先我们来看看最后实现的效果.Demo最后附上. 接下来开始讲解如何一步一步做出这个报表: ...

  7. 使用JS创建表格以及隔行换色(包括隔N行换色)

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  8. 今天学习了无序列表和有序列表和使用HTML5创建表格

    ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...

  9. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  10. C# 如何在PDF文档中创建表格

    表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理.那在PDF类型的文档中如何来添加表格并且对表格进行格式化操作呢?使用常规方法直接在PDF中添加表格行不通,那我们可以在借助第三方组 ...

随机推荐

  1. Android 自定义数字加减器

    该自定义View主要是实现一款效果不错的数字加减器的功能的,但是也可以自定义选择器的外观颜色等. 1.自定义View的布局(add_sub_view.xml) <?xml version=&qu ...

  2. 学会使用简单的MySQL操作

    第十八章 学会使用简单的MySQL操作 在前面两个章节中已经介绍过MySQL的安装了.可是光会安装还不够.还须要会一些主要的相关操作.当然了,关于MySQL的内容也是非常多的.仅仅只是对于linux系 ...

  3. 浅谈Volatile与多线程

        标题:浅谈Volatile与多线程 2011-04-19 22:49:17 最近看的比较杂,摘了一些人的笔记!随着多核的日益普及,越来越多的程序将通过多线程并行化的方式来提升性能.然而,编写正 ...

  4. struts2中 jsp:forward 失败原因及解决办法

    问题:在Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效了,不但调转不过去还报404错误.不知 ...

  5. Linux下自动备份Oracle数据库并删除指定天数前的备份

    说明: Oracle数据库服务器 操作系统:CentOS IP:192.168.0.198 端口:1521 SID:orcl Oracle数据库版本:Oracle11gR2 具体操作: 1.root用 ...

  6. linux 安装 登录 centos7

    常用资源下载 r.aminglinux.com centos7.aminglinux.com http://www.apelearn.com/study_v2/ 认识linux Debian Slac ...

  7. js操作注意事项

    1.函数赋值给变量时,不能加括号 function fun() { ... } var str=fun; 2.js创建构造函数和调用对象,对象内不能用var 变量,只能用this function f ...

  8. SQL 2005示例库(转载)

    sql2005数据库实例 从网上找还得麻烦,转了过来,点击就可以下载! 在学习SQL2005中离开不了SQL2005示例数据库,AdventureWorks数据库下载安装,,northwind数据库下 ...

  9. asp.net,cookie,写cookie,取cookie(转载)

    Cookie是一段文本信息,在客户端存储 Cookie 是 ASP.NET 的会话状态将请求与会话关联的方法之一.Cookie 也可以直接用于在请求之间保持数据,但数据随后将存储在客户端并随每个请求一 ...

  10. 实时Web的发展历史

    传统的Web是基于HTTP的请求/响应模型的:客户端请求一个新页面,服务器将内容发送到客户端,客户端再请求另外一个页面时又要重新发送请求.后来有人提出了AJAX,AJAX使得页面的体验更加“动态”,可 ...