Home Web Front-end HTML Tutorial HTML language analysis table markup

HTML language analysis table markup

Dec 15, 2016 pm 01:15 PM

it can be said that only learning 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.
Used to mark table columns (rows)
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 example 5 or 6, the table is placed in the middle, for fear that some browsers do not support it , so the center mark
is added, which is just a multi-layered guarantee. Of course, only
can also be used.

valign="top".
The placement position (vertical) of calligraphy and painting in the table, the optional values ​​are: top, middle, bottom.

background="myweb.gif"
Form paper, do not use it with bgcolor.

bgcolor="#0000ff"
Form 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 applicable to 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 applicable to ie』

cols="2"
The number of table fields only allows the browser to draw the entire table before downloading the table.
Parameter settings (commonly used):
For example:
align="right"
The placement position (horizontal) of 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, the optional values ​​are: top, middle, bottom.

bgcolor="#0000ff"
For the background color of this column, please see example 5.

bordercolor="#ff00ff"
For the border color of this column, please see Example 3. 『Only applicable to ie』

bordercolorlight="#808080"
The color of the light-facing part of the border in this column, please see example 3. 『Only applicable to ie』

bordercolordark="#ff0000"
The color of the backlight part of the border in this column, please see example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to ie』

align="top"
The table title column is relative to the table The placement position (horizontal) of the post, the optional values ​​are: left, center, right, top, middle, bottom. If align="bottom" is used, the title column will appear below the table, regardless of the position in your source code.
Parameter settings (commonly used):
For example:

width="48%"
This one is saved Grid width, accepts absolute value (such as 80) and relative value (such as 80%).

height="400"
The height of the cell.

colspan="5"
The number of columns that the cell opens to the right. Please look at Example 6

rowspan="4"
The number of columns that can be opened downwards in this cell. Please see Example 6

align="right"
The placement position (horizontal) of the calligraphy and painting in this cell, the optional values ​​are: left, center, right.

valign="bottom"
The position (vertical) of the placement 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 color of the cell border, please see example 3. 『Only applicable to ie』

bordercolorlight="#ff0000"
The color of the light-facing part of the cell border, please see example 3. 『Only applicable to 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 applicable to ie』

background="myweb.gif"
This grid paper can be used with either bgcolor.
Example 1:
Source code
A table with only one cell

Display results

A table with only one cell
Example 2:
Source code


Display results

First column, first column, first column, second column
Example 3:
Source code
First column, first columnFirst column, second column

< tr bordercolor="#0000ff">



< tr bordercolorlight="#ff00ff" bordercolordark="#00ff00">


< /tr>
First column, first columnFirst column, second column
Second column, first columnSecond column, second column

Display results

First column, first column, First column, second column
Second column, first column, Second column, second column
Example 4:
Source code







First column, first columnFirst column, second column
Second column, first column
Second column, second column

Display results

First column, first column Column 2
Column 2 1 Column 2 Column 2
Example 5:
Original code








< td>Second column, first column


First column, first columnFirst column, second column ColumnFirst column, third column
Second column, second columnSecond column, third column


Display results

First column, first column, First column, second column, First column, third column
Second column, first column, Second column, second column Second column and third column
Example 6
Source code














First column, first columnFirst column, second column and third column Column
The first column of the second and third columnsNo. Two columns, second columnSecond column, third column
Third column, second column< /td>
Third column, third column


Display results

First column, first column, first Column 2 and Column 3
Column 2 and Column 3 1st Column 2nd Column 2nd Column 2nd Column 3rd Column
The third column, the second column, the third column, the third column
:

and both mark a cell, the only difference is the cell marked by The text in appears in bold and is usually used in the first column of a table to identify 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













month% of ie visitor% of nc visitor
august61%39%
july54%46%
june52%48%

Show results

month % of ie visitor % of nc visitor
august 61% 39%
july 54% 46%
june 52% 48%
:

is used for The table is marked with a title column, which is like adding a ruled 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:
placed at the head or tail of a .

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:
Source code











august 61% 39%

The above is the content of HTML language analysis table markup. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!



Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

See all articles
Webpage Express August Visitor browser usage analysis
month% of ie visitor% of nc visitor
august61%