HTML语言剖析（七）表格标记

最新推荐文章于 2024-05-30 19:41:18 发布
最新推荐文章于 2024-05-30 19:41:18 发布
阅读量514 收藏
点赞数
分类专栏： HTML 文章标签： html 语言 border table ie 浏览器
■ <TABLE> <TR> <TD> ：
这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
<TR>用以标示表格列（ROW）
<TD>用以标示储存格（CELL）

<TABLE> 的参数设定（常用）：
例如： <TABLE WIDTH="400" BORDER="1" CELLSPACING="2" CELLPADDING="2" ALIGN="CENTER" VALIGN="TOP" BACKGROUND="MYWEB.GIF" BGCOLOR="#0000FF" BORDERCOLOR="#FF00FF" BORDERCOLORLIGHT="#00FF00" BORDERCOLORDARK="#00FFFF" COLS="2">

 

  • WIDTH="400"
    表格宽度，接受绝对值（如 80）及相对值（如 80%）。

     

  • BORDER="1"
    表格边框厚度，不同浏览器有不同的内定值，故请指明。

     

  • CELLSPACING="2"
    表格格线厚度，请看例子三，那是加厚到 5 的格线。

     

  • CELLPADDING="2"
    文字与格线的距离，请看例子四，那是加至 10 的 PADDING。

     

  • ALIGN="CENTER"
    表格的摆放位置（水平），可选值为： LEFT, RIGHT, CENTER，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多 层保证而己，当然只用<CENTER>亦可。

     

  • VALIGN="TOP".
    表格内字画等的摆放贴　位置（垂直），可选值为： TOP, MIDDLE, BOTTOM。

     

  • BACKGROUND="MYWEB.GIF"
    表格　纸，与 BGCOLOR 不要同用。

     

  • BGCOLOR="#0000FF"
    表格底色，与 BACKGROUND 不要同用，请看例子六。

     

  • BORDERCOLOR="#FF00FF"
    表格边框颜色，NC 与 IE 有不同的效果，请看例子六。

     

  • BORDERCOLORLIGHT="#00FF00"
    表格边框向光部分的颜色，请看例子二。『只适用于 IE』

     

  • BORDERCOLORDARK="#00FFFF"
    表格边框背光部分的颜色，请看例子二，使用 BORDERCOLORLIGHT 或 BORDERCOLORDARK 时 BORDERCOLOR 将会失效。『只适用于 IE』

     

  • COLS="2"
    表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

<TR> 的参数设定（常用）：
例如：<TR ALIGN="RIGHT" VALIGN="MIDDLE" BGCOLOR="#0000FF" BORDERCOLOR="#FF00FF" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#FF0000">

  • ALIGN="RIGHT"
    该一列内字画等的摆放贴　位置（水平），可选值为： LEFT, CENTER, RIGHT。

     

  • VALIGN="MIDDLE"
    该一列内字画等的摆放贴　位置（垂直），可选值为： TOP, MIDDLE, BOTTOM。

     

  • BGCOLOR="#0000FF"
    该一列底色，请看例子五。

     

  • BORDERCOLOR="#FF00FF"
    该一列边框颜色，请看例子三。『只适用于 IE』

     

  • BORDERCOLORLIGHT="#808080"
    该一列边框向光部分的颜色，请看例子三。『只适用于 IE』

     

  • BORDERCOLORDARK="#FF0000"
    该一列边框背光部分的颜色，请看例子三，使用 BORDERCOLORLIGHT 或 BORDERCOLORDARK 时 BORDERCOLOR 将会失效。『只适用于 IE』

<TD> 的参数设定（常用）：
例如：<TD WIDTH="48%" HEIGHT="400" COLSPAN="5" ROWSPAN="4" ALIGN="RIGHT" VALIGN="BOTTOM" BGCOLOR="#FF00FF" BORDERCOLOR="#808080" BORDERCOLORLIGHT="#FF0000" BORDERCOLORDARK="#00FF00" BACKGROUND="MYWEB.GIF">

  • WIDTH="48%"
    该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

     

  • HEIGHT="400"
    该一储存格高度。

     

  • COLSPAN="5"
    该一储存格向右打通的栏数。请看例子六

     

  • ROWSPAN="4"
    该一储存格向下打通的列数。请看例子六

     

  • ALIGN="RIGHT"
    该一储存格内字画等的摆放贴　位置（水平），可选值为： LEFT, CENTER, RIGHT。

     

  • VALIGN="BOTTOM"
    该一储存格内字画等的摆放贴　位置（垂直），可选值为： TOP, MIDDLE, BOTTOM。

     

  • BGCOLOR="#FF00FF"
    该一储存格底色，请看例子四。

     

  • BORDERCOLOR="#808080"
    该一储存格边框颜色，请看例子三。『只适用于 IE』

     

  • BORDERCOLORLIGHT="#FF0000"
    该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』

     

  • BORDERCOLORDARK="#00FF00"
    该一储存格边框背光部分的颜色，请看例子三，使用 BORDERCOLORLIGHT 或 BORDERCOLORDARK 时 BORDERCOLOR 将会失效。『只适用于 IE』

     

  • BACKGROUND="MYWEB.GIF"
    该一储存格　纸，与 BGCOLOR 任用其一。

例子一：

原始码<TABLE WIDTH="60%" BORDER="1">
<TR><TD>只有一个储存格（CELL）的表格</TD></TR>
</TABLE>
显示结果

 

只有一个储存格（CELL）的表格

例子二：

原始码<TABLE WIDTH="60%" BORDER="5" BORDERCOLORLIGHT="#FF00FF" BORDERCOLORDARK="#FF0000">
<TR><TD>第一列第一栏</TD><TD>第一列第二栏</TD></TR>
</TABLE>
显示结果

 

第一列第一栏第一列第二栏

例子三：

原始码<TABLE WIDTH="60%" BORDER="1" CELLSPACING="5">
     <TR BORDERCOLOR="#0000FF">
<TD>第一列第一栏</TD>
<TD>第一列第二栏</TD>
     </TR>
     <TR BORDERCOLORLIGHT="#FF00FF" BORDERCOLORDARK="#00FF00">
<TD>第二列第一栏</TD>
<TD>第二列第二栏</TD>
     </TR>
</TABLE>
显示结果

 

第一列第一栏第一列第二栏
第二列第一栏第二列第二栏

例子四：

原始码<TABLE WIDTH="60%" BORDER="1" CELLPADDING="10">
     <TR>
<TD BGCOLOR="#FFCCE6">第一列第一栏</TD>
<TD BGCOLOR="#FFFFC6">第一列第二栏</TD>
     </TR>
     <TR>
<TD BGCOLOR="#FFD9FF">第二列第一栏</TD>
<TD BGCOLOR="#DAB4B4">第二列第二栏</TD>
     </TR>
</TABLE>
显示结果

 

第一列第一栏第一列第二栏
第二列第一栏第二列第二栏

例子五：

原始码<CENTER>
<TABLE WIDTH="60%" CELLSPACING="0" CELLPADDING="2" ALIGN="CENTER">
     <TR>
<TD BGCOLOR="#FFD2E9">第一列第一栏</TD>
<TD BGCOLOR="#FFDAB5">第一列第二栏</TD>
<TD BGCOLOR="#FFFFB5">第一列第三栏</TD>
     </TR>
     <TR BGCOLOR="#C0C0C0">
<TD>第二列第一栏</TD>
<TD>第二列第二栏</TD>
<TD>第二列第三栏</TD>
     </TR>
</TABLE>
</CENTER>
显示结果

 

第一列第一栏第一列第二栏第一列第三栏
第二列第一栏第二列第二栏第二列第三栏

例子六

原始码<CENTER>
<TABLE WIDTH="350" BORDER="1" CELLSPACING="0" CELLPADDING="2" ALIGN="CENTER" BGCOLOR="#FFC4E1" BORDERCOLOR="#0000FF">
     <TR>
<TD>第一列第一栏</TD>
<TD COLSPAN="2">第一列 之 第二栏及第三栏</TD>
     </TR>
     <TR>
<TD ROWSPAN="2">第二列及第三列 之 第一栏</TD>
<TD>第二列第二栏</TD>
<TD>第二列第三栏</TD>
     </TR>
     <TR>
<TD>第三列第二栏</TD>
<TD>第三列第三栏</TD>
     </TR>
</TABLE>
</CENTER>
显示结果

 

第一列第一栏第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏第二列第二栏第二列第三栏
第三列第二栏第三列第三栏

■ <TH> ：
<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数 设定请参考<TD>。
当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。

例子：

原始码<CENTER>
<TABLE WIDTH="350" BORDER="1" CELLSPACING="0" CELLPADDING="2" ALIGN="CENTER">
     <TR ALIGN="CENTER">
<TH>MONTH</TH><TH>% OF IE VISITOR</TH><TH>% OF NC VISITOR</TH>
     </TR>
     <TR ALIGN="CENTER">
<TD>AUGUST</TD><TD>61%</TD><TD>39%</TD>
     </TR>
     <TR ALIGN="CENTER">
<TD>JULY</TD><TD>54%</TD><TD>46%</TD>
     </TR>
     <TR ALIGN="CENTER">
<TD>JUNE</TD><TD>52%</TD><TD>48%</TD>
     </TR>
</TABLE>
</CENTER>
显示结果

 

MONTH% OF IE VISITOR% OF NC VISITOR
AUGUST61%39%
JULY54%46%
JUNE52%48%

■ <CAPTION> ：
<CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。

<CAPTION> 的参数设定（常用）：
例如：<CAPTION ALIGN="TOP" VALIGN="TOP"></CAPTION>

  • ALIGN="TOP"
    该表格标题列相对于表格的摆放贴　位置（水平），可选值为： LEFT, CENTER, RIGHT, TOP, MIDDLE, BOTTOM，若 ALIGN="BOTTOM" 的话标题列便会出现对表格的下方，不管你 的原始码中把 <CAPTION> 放在 <TABLE> 中的头部或尾部。

     

  • VALIGN="TOP"
    该表格标题列相对于表格的摆放位置（上下），可选值为： TOP, BOTTOM。和 ALIGN="TOP" 或 ALIGN="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列 置于下方及向右或向左贴　，那末两个参数便可一　用了。当只　一个参数时， 请首选 ALIGN，因为 VALIGN 是由 HTML 3.0 才开始的参数。

例子：

原始码<CENTER>
<TABLE WIDTH="350" BORDER="1" CELLSPACING="0" CELLPADDING="2" ALIGN="CENTER">
<CAPTION>网页速成 八月份访客浏览器使用分析</CAPTION>
     <TR ALIGN="CENTER">
<TH>MONTH</TH>
<TH>% OF IE VISITOR</TH>
<TH>% OF NC VISITOR</TH>
     </TR>
     <TR ALIGN="CENTER">
<TD>AUGUST</TD>
<TD>61%</TD>
<TD>39%</TD>
     </TR>
</TABLE>
</CENTER>
显示结果

 

网页速成 八月份访客浏览器使用分析
MONTH% OF IE VISITOR% OF NC VISITOR
AUGUST61%39%

 
icebox126
关注
专栏目录
网设计最新经典技术文档HTML语言剖析七表格标记样本.doc
12-17
HTML语言是网页设计的基础，它的表格标记是构建数据展示和组织的重要工具。本文将深入剖析HTML中的表格标记，包括, , , 和，以及相关的参数设定。 标记是定义表格的核心，它定义了一个表格的开始和结束。所有的表格...
HTML的表格标记
sinat_58088248的博客
02-26 5988
一.表格标记 功能：建立基本表格。 格式：<table bgcolor ='color1' background='image-url' border='n' bordercolor='color2' width='x' height='y' align='left/right/center' cellspacing='i' cellpadding='j'> <caption>表格标题</caption> <tr> <th>表头1..
HTML-表格标签的使用
m0_57878719的博客
03-13 761
table>标记表示整个表格。标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对齐方式，cellspacing是表格里单元格之间的距离， cellpadding是表格里单元格内的空白部分。单元格标记，又称为列标记，一个标记中可以嵌套若干个标记。在或者中添加colspan="2",可以合并两列单元格，colspan后填写的值指的是合并单元格的列数。
HTML表格标签超级详细
zheng_qingyuan的博客
06-19 4101
表格是网页中十分重要的组成元素。表格包含表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列等内容。 标签。简单的 HTML 表格由 table 元素以及一个或多个 、 或 元素组成表格结构其中： 元素定义表格行， 元素定义表头， 元素定义表格单元。标记常用属性属性名说明align设置表格相对周围元素的对齐方式bgcolor设置表格的背景颜色background设置表格的背景图片border设置表格的边框wi......
HTML表格标签
m0_57898822的博客
04-04 2913
html表格标签及属性
HTML表格基础
最新发布
dahongmao的博客
05-30 1079
日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。标签用于定义表头单元格，其文本默认加粗居中显示，而标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。表格的宽度和高度是自适应的，依靠表格内的内容来支撑，要想更改表格的尺寸，就需要对其应用宽度属性width和高度属性height。bgcolor 设置表格的背景颜色 颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)
网设计最新经典技术文档HTML语言剖析七表格标记模板.doc
12-21
本技术文档主要关注HTML中的表格标记，表格是网页布局和数据展示的重要元素。 表格标记主要有以下四个基本元素： 1. `<TABLE>`：这是表格的容器标记，用于声明一个表格的开始和结束。所有表格相关的元素都应包含在...
html标记语言详细解析与实例
11-29
12. HTML 语言剖析之表格标记：表格标记用于创建表格，包括、、<TD> 等标记。 13. HTML 语言剖析之表单标记：表单标记用于创建表单，包括、、<TEXTAREA> 等标记。 14. HTML 语言剖析之图形标记：图形标记用于创建...
HTML5制作表格样式
09-27
在HTML5中，创建表格是一种常见的数据展示方式。本篇文章将详细介绍如何使用HTML5...这样的表格适用于各种用途，包括报告、数据分析或网页中的信息展示。学习并掌握这些HTML和CSS技巧，将有助于提升你的网页设计能力。
漂亮的表格css+html
03-20
"漂亮的表格css+html"这个主题聚焦于如何利用CSS（层叠样式表）和HTML（超文本标记语言）来创建视觉吸引力强且用户体验良好的表格。下面我们将详细探讨相关的知识点。 1. **HTML表格基础**： - `<table>`标签：...
HTML之表格标签
hmh520i的博客
12-19 2744
前端学习日记
HTML的表单标记
sinat_58088248的博客
03-06 4062
一.HTML的表单标记 表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。这里只介绍如何使用HTML的表单标记来设计表单的外表。 表单信息的处理过程为：当单击表单中的“提交”按钮时，在表单中输入的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序（ASP，CGI等程序）进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中，这样网页就具有了交互性。这里只介绍如何使用HTML的表单标记来设计...
【HTML】表格标记
Cherie
04-30 7247
设计网页时经常会用到表格来组织页面信息，它能将网页划分成任意多个矩形区域，每个区域可包含导航、文字、图像、动画等信息，设计者可将任意的网页元素放入其中。 1. 表格的定义： 1）在需要使用表格的地方插入成对的标记，就可以完成表格的插入。定义表格常用的标记有 标签                                       说明
HTML：表格的应用知识
jinyiY的博客
04-29 1283
1.创建表格 在HTML中，表格主要通过三个标记来构成，即表格标记（table）、行标记（tr）、单元格标记（td）。 1.1表格的基本构成 表格中各元素的含义如下： 元素 含义 行和列 横向为行，纵向为列 单元格 行列交叉的部分 边距 单元格中的内容和表框之间的距离 间距 单元格和单元格之间的距离 边框 整张表格的边缘叫边框 三要素 行、列、单元格 嵌套 ...
HTML语言剖析7:表格标记
seven2000的专栏
08-21 1125
HTML语言剖析-7▲Top七、表格标记 ■
html哪个是表格标记,HTML表格标记
weixin_42154650的博客
06-29 1212
■ 表格标记欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。也请先明白围堵标记与空标记的分别，请看 【HTML概念】。■ ：这三个标记是定义表格的最重要的标记，可以说只学这三个已足够。是一个容器标记，意思是说它用以宣告这是表格而其它标记只能在它的范围内 才适用，属容器标记的还有其他。用以标示表格行(row)用以标示表格列(cell) 的参数设定(常用)：例如： width="4...
html语言表格标记符号,html标记中哪个标记表示表格
weixin_39943750的博客
05-31 2866
html标记中，哪个标记表示表格HTML 中表格标记和单元格标记分别是什么HTML里表格的标签是什么？ 和 单元格的标签是什么？ 表格的宽度可以用百分比和哪两种单位来设置？ 答:另一种用实际尺寸单位，常用像素PX表示 用来输入密码的表单域是什么？ HTML 网页文件的标记是什么？ 文件的开始标记和文件下面HTML标记中，哪个是表示表格标记: ( )A、………… B、………… C、………...
html表格标记
sunfor的专栏
12-30 1036
表格标志 创建一个表格 表格中的每一行 表格中一行中的每一个格子 设置表格头:通常是黑体居中文字 设置边框的宽度 设置表格格子之间空间的大小 设置表格格子边框与其内部内容之间空间的大小 设置表格的宽度。用绝对像素值或总宽度的百分比 设置表格格子的水平对齐方式(左中右) 设置表格格子的垂直对齐方式(上中下) 设置一个表格格子跨占的列数
html创建表格的标记,HTML-表格(TABLE)标记(TAGS)
weixin_33213367的博客
06-22 1274
表格(TABLE)标记(TAGS) 表格的基本语法 ... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据) 带边框的表格：FoodDrinkSweetABCFoodDrinkSweetABC不带边框的表格：FoodDrinkSweetABCFoodDrinkSweetABC 跨多行、多列的表元(Table Span) 跨多列的表元 Morning MenuFood ...
HTML语言剖析：表格标记详解
"HTML语言剖析七表格标记模板" 在网页设计中，HTML（HyperText Markup Language）是一种基础的标记语言，用于构建和布局网页内容。本技术文档深入剖析了HTML中的表格标记，这对于理解和创建复杂的网页布局至关重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值