Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Detailed introduction to table (TABLE) tags (TAGS)_HTML/Xhtml_Web page production

Detailed introduction to table (TABLE) tags (TAGS)_HTML/Xhtml_Web page production

WBOY
Release： 2016-05-16 16:40:54
Original
1323 people have browsed it

Basic syntax of tables

...
- Define table
- Define table row
- Define table header
- Define table Yuan (specific data of the table)

Table with borders:


Copy the code
The code is as follows:

< ;table border>
FoodDrinkSweet
A< ;/td>BC

Food Drink Sweet
A B C


Table without borders:

Copy the code
The code is as follows:
td>A
BC





Food Drink Sweet
A B C

Table Span spanning multiple rows and columns

Table elements spanning multiple columns


Copy code
The code is as follows:
;th>Drink
Sweet
ABC






Table elements spanning multiple rows
Morning Menu
Food Drink Sweet
A B C


Copy code
The code is as follows:< ;tr>< ;th>Drink

Morning Menu Food A
B
Sweet C



Table size setting

Border size settings:


Copy code
The code is as follows:

< table border=10>


FoodDrinkSweet
ABC

Food Drink Sweet
A B C

Table size setting:


Copy code
The code is as follows:

< table border width=170 height=100>


FoodDrinkSweet
ABC

Food Drink Sweet
A B C

Table element gap setting:


Copy code
The code is as follows:

< ;table border cellspacing=10>

< td>A
FoodDrinkSweet
BC

Food Drink Sweet
A B C

Internal blank setting of table element:


Copy the code
The code is as follows:



< ;td>A
FoodDrinkSweet
BC

Food Drink Sweet
A B C

Alignment/layout of text within the table

#=left, center, right



Copy code
The code is as follows:








FoodDrinkSweet
A B C

Food Drink Sweet
A B C

#=top, middle, bottom, baseline



Copy code
The code is as follows:








< ;td valign=bottom>C

FoodDrink Sweet Other
A B D

Food Drink Sweet Other
A B C D

Alignment/layout of the table on the page (Floating Table)


Copy code
The code is as follows:



FoodDrinkSweet
ABC


My favorites...
cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

#=space value


复制代码
代码如下:




FoodDrinkSweet
ABC


 My favorites...
cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

 表格的标题

... #=left, center, right

复制代码
代码如下:





Lunch
FoodDrinkSweet
ABC

Lunch
Food Drink Sweet
A B C
Lunch
Food Drink Sweet
A B C

... #=top, bottom

valign=top is default.
复制代码
代码如下:






Lunch
FoodDrinkSweet
ABC

Food Drink Sweet
A B C
Lunch
Related labels：
table mark sheet
source：php.cn
Previous article：Analysis of the difference between absolute paths and relative paths in HTML_HTML/Xhtml_Web page production Next article：Have you ever carefully understood the tag, how it is defined and how to use it_HTML/Xhtml_webpage production
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
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Regular expression to match words I have a script where I am trying to match new job names with existing job names in a data...
From 2024-04-06 21:24:04
0
1
606
The query and formula form the entire table, with new columns, where the new columns are formulas involving other conditional column values EDIT: The formula should be the "value" column - the "value" column wi...
From 2024-04-06 21:23:40
0
2
530
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template