第三节 HTML标签深入学习之Table标签

第三节 HTML标签深入学习之Table标签

<table> 标签

HTML 表格。

一个简单的 HTML 表格，包含两行两列：

1 2 3 4 5 6 7 8 9 10

< table border = "1" >      < tr >          < th >Month</ th >          < th >Savings</ th >      </ tr >      < tr >          < td >January</ td >          < td >$100</ td >      </ tr > </ table >

标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table>标签里通常会包含几个<tr>标签，<tr>代表表格里的一行。<tr>标签又会包含<td>标签，每个<td>代表一个单元格。

<tr>标签还可以被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别代表表头，表正文，表脚。在打印网页的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

<th>和<td>非常相似，也用在<tr>里边，不同的是<th>代表这个单元格是它所在的行或列的标题。

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< table border = "1" >    < thead >      < tr >        < th >Month</ th >        < th >Savings</ th >      </ tr >    </ thead >      < tfoot >      < tr >        < td >Sum</ td >        < td >$180</ td >      </ tr >    </ tfoot >      < tbody >      < tr >        < td >January</ td >        < td >$100</ td >      </ tr >      < tr >        < td >February</ td >        < td >$80</ td >      </ tr >    </ tbody > </ table >

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

表格在实际的网页设计中的作用

表格可以固定文本或图像的显示位置，表格1的展示效果是由表格2产生的：

表格1：

	IT资讯技术交流学习
HTML	HTML基础学习
JAVA	java高级教程
HADOOP	hadoop是一个大象吗？

表格2：

	IT资讯技术交流学习
HTML	HTML基础学习
JAVA	java高级教程
HADOOP	hadoop是一个大象吗？

表格1的源代码如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< html >     < head >       < title >table 学习</ title >     </ head >     < body >                 < table width = "80%" border = "0" style = "background:#EE82EE;" >                  < tr >                      < td width = "25%" >< img alt = "www.zixun24.com" src = "logo.gif" ></ td >< td bgcolor = "blue" >< h3 >IT资讯技术交流学习</ h3 ></ td >                  </ tr >                     < tr >                      < td >HTML</ td >< td >HTML基础学习</ td >                  </ tr >                  < tr >                      < td >JAVA</ td >< td >java高级教程</ td >                  </ tr >                  < tr >                      < td >HADOOP</ td >< td >hadoop是一个大象吗？</ td >                         </ tr >              </ table >        </ body > </ html >

用表格来对网页布局也是非常流行的一种布局方式。对许多的网页设计者而言，创建结构化的网页，开始的工作就是绘制结构化的表格，把网页划分成若干个区域后，在各个区域中填写具体的页面内容，设计者可以用这种的设计方式来达到对网页的规划。上例中表格1中的显示就是从表格2的设计而来，只是表格2的边框把宽带设置成0。

table属性：

属性	值	描述
align	left center right	规定表格的对其方式
bgcolor	rgb(x,x,x) #xxxxxx colorname	定义表格的背景颜色
border	pixels	规定表格边框的宽度
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
width	pixels %	规定表格的宽度。
height	pixels %	规定表格的高度。

我们可以修改上例表格1中的源代码：其中设置宽度是屏幕的80%（width=”80%”），bgcolor=”red（背景颜色是红色），bordercolor=”yellow”（单元格边框颜色是黄色），cellpadding=”10″（单元格边框里面的内容与边框之间的距离是5像素），cellspacing=”20（单元格边框与另外单元格边框之间的距离是20像素，即黄色线条之间的距离）。

实例：

<table width="80%" border="1" bgcolor="red" bordercolor="yellow" cellpadding="10" cellspacing="20">
    <tr>
        <td width="20%"><img alt="www.zixun24.com" src="http://www.zixun24.com/image/logo.gif"></td><td bgcolor="blue"><h3>IT资讯技术交流学习</h3></td>
    </tr>    
           <tr>
                <td>HTML</td><td>HTML基础学习</td>
            </tr>
            <tr>
                <td>JAVA</td><td>java高级教程</td>
            </tr>
            <tr>
                <td>HADOOP</td><td>hadoop是一个大象吗？</td>        
            </tr>
        </table>

 

tr属性：

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格行的背景颜色。
char	character	规定根据哪个字符来进行文本对齐。
charoff	number	规定第一个对齐字符的偏移量。
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式。

tr标签只能用在table中，在其它地方使用无效，在tr标签中设置和tableb标签中相同属性的时候，会覆盖相同属性的值。

在上面的实例中可以tr标签如：<tr bgcolor=”green” align=”center”>，标准背景颜色是绿色，表格行内的文字的对其方式是居中。

td属性：

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	right left center justify char	规定单元格内容的水平对齐方式。
axis	category_name	对单元进行分类。
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定单元格的背景颜色
char	character	规定根据哪个字符来进行内容的对齐。
charoff	number	规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_cells’_id	规定与单元格相关的表头。
height	pixels %	规定表格单元格的高度
nowrap	nowrap	规定单元格中的内容是否折行。
rowspan	number	规定单元格可横跨的行数。
scope	col colgroup row rowgroup	定义将表头数据与单元数据相关联的方法。
valign	top middle bottom baseline	规定单元格内容的垂直排列方式。
width	pixels %	规定表格单元格的宽度。

提示：请使用 colspan 和 rowspan 属性来实现内容横跨多个行或列。

实例：

1 2 3 4 5 6 7 8 9 10 11

< table width = "50%" border = "1" bgcolor = "red" >      < tr >          < td colspan = "2" >单元格11,单元格12</ td >< td >单元格13</ td >      </ tr >      < tr >          < td >单元格21</ td >< td rowspan = "2" >单元格22,单元格32</ td >< td >单元格23</ td >      </ tr >      < tr >          < td >单元格31</ td >< td >单元格33</ td >      </ tr > </ table >

colspan=”2″表示把横向的单两个元格合并。rowspan=”2″表示吧竖向的两个单元格合并。

展示效果：

单元格11,单元格12		单元格13
单元格21	单元格22,单元格32	单元格23
单元格31		单元格33

|2|1

文章分页

«« 第二节 HTML基本架构学习

第四节 HTML标签深入学习之Frame标签»»