Home  >  Article  >  Web Front-end  >  Detailed explanation of HTML table markup (suitable for beginners)_HTML/Xhtml_Web page production

Detailed explanation of HTML table markup (suitable for beginners)_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:45:091781browse

TABLE>





这三个标记是定义表格的最重要的标记,可以说只学这三个己足够。
是一个容器标记,意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用,属容器标记的还有其他。
用以标示表格列(row)

show results
First column, first column First column, second column Second column, first column Second column, second column
Example 5: Source code

用以标示储存格(cell)
的参数设定(常用):
例如:

width="400"
表格宽度,接受绝对值(如 80)及相对值(如 80%)。 border="1"
表格边框厚度,不同浏览器有不同的内定值,故请指明。 cellspacing="2"
表格格线厚度,请看例子三,那是加厚到 5 的格线。 cellpadding="2"
文字与格线的距离,请看例子四,那是加至 10 的 padding。 align="CENTER"
表格的摆放位置(水平),可选值为: left, right, 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"
表格栏位数目,只是让浏览器在下载表格是先画出整个表格而己。
的参数设定(常用):
例如: align="RIGHT"
该一列内字画等的摆放贴 位置(水平),可选值为: left, center, right。 valign="MIDDLE"
该一列内字画等的摆放贴 位置(垂直),可选值为: top, middle, bottom。 bgcolor="#0000FF"
该一列底色,请看例子五。 bordercolor="#FF00FF"
该一列边框颜色,请看例子三。『只适用于 IE』 bordercolorlight="#808080"
该一列边框向光部分的颜色,请看例子三。『只适用于 IE』 bordercolordark="#FF0000"
该一列边框背光部分的颜色,请看例子三,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
的参数设定(常用):
例如:
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 任用其一。
例子一:


只有一个储存格(cell)的表格

:
These three tags are the most important tags for defining tables. It can be said that learning only these three is enough.
is a container tag, which means that it is used to declare that this is a table and other table tags can only be applied within its scope. There are other container tags.


第一列第一栏 第一列第二栏
is used to mark table columns (rows) is used to mark cells (cells) parameter settings (commonly used): For example:
width="400" Table width, accepts absolute values ​​(such as 80) and relative values ​​(such as 80%). border="1" Table border thickness. Different browsers have different default values, so please specify. cellspacing="2" Table grid line thickness, please see example 3, that is a grid line thickened to 5. cellpadding="2" The distance between the text and the grid, please see example 4, that is the padding added to 10. align="CENTER" The placement position (horizontal) of the table. The optional values ​​are: left, right, center. Please see examples 5 or 6. The table is placed in the middle because some browsers do not support it. , so the center mark
is added, which is just a multi-layered guarantee. Of course, only
can be used. valign="TOP". The placement position (vertical) of calligraphy and painting in the table. Optional values ​​are: top, middle, bottom. background="myweb.gif" Form paper, do not use it with bgcolor. bgcolor="#0000FF" Table background color, do not use it with background. Please see Example 6. bordercolor="#FF00FF" Table border color, NC and IE have different effects, please see Example 6. bordercolorlight="#00FF00" The color of the light-facing part of the table border, please see example 2. "Only for IE" bordercolordark="#00FFFF" The color of the backlight part of the table border, please see example 2. When using bordercolorlight or bordercolordark, bordercolor will be invalid. "Only for IE" cols="2" The number of table fields just allows the browser to draw the entire table before downloading the table. parameter settings (commonly used): For example:
align="RIGHT" The position (horizontal) of placing calligraphy and painting in this column. Optional values ​​are: left, center, right. valign="MIDDLE" The placement position (vertical) of calligraphy and painting in this column. Optional values ​​are: top, middle, bottom. bgcolor="#0000FF" For the background color of this column, please see Example 5. bordercolor="#FF00FF" The border color of this column, please see example 3. "Only for IE" bordercolorlight="#808080" The color of the light-facing part of the border of this column, please see example 3. "Only for IE" bordercolordark="#FF0000" The color of the backlight part of the border of this column, please see example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. "Only for IE" parameter settings (commonly used): For example:


width="48%" This cell width accepts absolute values ​​(such as 80) and relative values ​​(such as 80%). height="400" The height of the cell. colspan="5" The number of columns that this cell opens to the right. Please see example six rowspan="4" The number of columns that this cell opens downwards. Please see example six align="RIGHT" The placement position (horizontal) of calligraphy and painting in this cell. Optional values ​​are: left, center, right. valign="BOTTOM" The placement position (vertical) of calligraphy and painting in this cell. The optional values ​​are: top, middle, bottom. bgcolor="#FF00FF" For the background color of this cell, please see Example 4. bordercolor="#808080" The border color of this cell, please see example 3. "Only for IE" bordercolorlight="#FF0000" The color of the light-facing part of the cell border, please see example 3. "Only for IE" bordercolordark="#00FF00" The color of the backlight part of the cell border. Please see Example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. "Only for IE" background="myweb.gif" This is a grid paper, either one or bgcolor. Example 1:
A table with only one cell
Show results Table with only one cell Example 2:
First column, first column First column, second column
Show results
First column, first column First column, second column
Example 3:





第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏
First column, first column First column, second column
Second column, first column Second column, second column





第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏
Display results
First column, first column First column, second column Second column, first column Second column, second column
Example 4:

First column, first column First column, second column





第一列第一栏 第一列第二栏 第一列第三栏
第二列第一栏 第二列第二栏 第二列第三栏
Second column, first column Second column, second column

First column, first column First column, second column First column Third column







第一列第一栏 第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
第三列第二栏 第三列第三栏
Second column, first column Second column, second column td> Second column, third column
Display results
First column, first column, first column, first column Column 2, Column 1, Column 3, Column 2, Column 1, Column 2, Column 2, Column 2, Column 3 Example 6 Original code
The first column of the second and third columns

The first column of the first column The second and third columns of the first column
The second column of the second column The third column of the second column
Third column, second column Third column, third column

Show results








Month % of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%

The first column, the first column, the second column and the third column, the second column and the third column, the first column, the second column, the second column, the second column, the third column, the third column, the second column. Third column of three columns

:
and
both mark a cell. The only difference is that the text in the cell marked by appears in bold. It is usually used in the first column of a table to mark columns. . Its usage is to replace the position of . Please refer to for its parameter settings. Of course, if you add a bold mark
to the text in the cell marked by , it will have the same effect as
. Example: Source code
中的头部或尾部。 valign="TOP"
该表格标题列相对于表格的摆放位置(上下),可选值为: top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的,虽然功能重复了,但如果你要标题列 置于下方及向右或向左贴 ,那末两个参数便可一 用了。当只 一个参数时, 请首选 align,因为 valign 是由 HTML 3.0 才开始的参数。
例子:







网页速成 八月份访客浏览器使用分析
Month % of IE visitor % of NC visitor
August 61% 39%
Month % of IE visitor % of NC visitor
August 61% 39% July 54% 46% June 52% 48% Show results Month % of IE visitor % of NC visitor August 61% 39% July 54% 46% June 52% 48% ■ : is used to mark a title column for the table, just like adding a grid-lined opening column above the table. Of course, it can also be placed below, which is usually used to store the title of the form. parameter settings (commonly used): For example: align="TOP" The position (horizontal) of the table title column relative to the table. Optional values ​​are: left, center, right, top, middle, bottom. If align="bottom" is used, the title column The table will appear below, regardless of whether you put at the head or tail of in your source code. valign="TOP" The position (top and bottom) of the table title column relative to the table. Optional values ​​are: top, bottom. It is the same as align="TOP" or align="BOTTOM". Although the functions are repeated, if you want the title bar to be placed below and pasted to the right or left, then the two parameters can be used together. When there is only one parameter, please prefer align because valign is a parameter only started in HTML 3.0. Example:
Web Speed ​​August Visitor Browser Usage analysis
Month % of IE visitor % of NC visitor
August 61% 39%
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn