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

来源：互联网发布：淘宝消费积分编辑：程序博客网时间：2024/06/05 08:36

<table> 标签

HTML 表格。

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

1
2
3
4
5
6
7
8
9
10
<tableborder="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
<tableborder="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资讯技术交流学习

HTMLHTML基础学习JAVAjava高级教程HADOOPhadoop是一个大象吗？

表格2：

IT资讯技术交流学习

HTMLHTML基础学习JAVAjava高级教程HADOOPhadoop是一个大象吗？

表格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>   
            <tablewidth="80%"border="0"style="background:#EE82EE;">
                <tr>
                    <tdwidth="25%"><imgalt="www.zixun24.com"src="logo.gif"></td><tdbgcolor="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属性：

属性值描述alignleft
center
right规定表格的对其方式bgcolorrgb(x,x,x)
#xxxxxx
colorname定义表格的背景颜色borderpixels规定表格边框的宽度cellpaddingpixels
%规定单元边沿与其内容之间的空白。cellspacingpixels
%规定单元格之间的空白。widthpixels
%规定表格的宽度。heightpixels
%规定表格的高度。

我们可以修改上例表格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属性：

属性值描述alignright
left
center
justify
char定义表格行的内容对齐方式。bgcolorrgb(x,x,x)
#xxxxxx
colorname规定表格行的背景颜色。charcharacter规定根据哪个字符来进行文本对齐。charoffnumber规定第一个对齐字符的偏移量。valigntop
middle
bottom
baseline规定表格行中内容的垂直对齐方式。

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

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

td属性：

属性值描述abbrtext规定单元格中内容的缩写版本。alignright
left
center
justify
char规定单元格内容的水平对齐方式。axiscategory_name对单元进行分类。bgcolorrgb(x,x,x)
#xxxxxx
colorname规定单元格的背景颜色charcharacter规定根据哪个字符来进行内容的对齐。charoffnumber规定对齐字符的偏移量。colspannumber规定单元格可横跨的列数。headersheader_cells’_id规定与单元格相关的表头。heightpixels
%规定表格单元格的高度nowrapnowrap规定单元格中的内容是否折行。rowspannumber规定单元格可横跨的行数。scopecol
colgroup
row
rowgroup定义将表头数据与单元数据相关联的方法。valigntop
middle
bottom
baseline规定单元格内容的垂直排列方式。widthpixels
%规定表格单元格的宽度。

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

实例：

1
2
3
4
5
6
7
8
9
10
11
<tablewidth="50%"border="1"bgcolor="red">
    <tr>
        <tdcolspan="2">单元格11,单元格12</td><td>单元格13</td>
    </tr>
    <tr>
        <td>单元格21</td><tdrowspan="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标签»»

0 0

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

详细描述

IT资讯技术交流学习

IT资讯技术交流学习

文章分页