简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

What is html table? How to use various attributes in the
寻∝梦
Release： 2018-08-22 13:59:09
Original
24519 people have browsed it

html What is table? The various attributes and uses of the

tag

First let us understand what a table is and its function

What is a table Table: It consists of some rectangular boxes called cells arranged together in order from left to right and top to bottom.

The function of table: to display information in a certain structure.

How we use table table:

Define table:

tag are all in this article. It is very suitable for people who are new to the table tag to learn. This article clearly explains all the basic attributes of the table. The role of the html table table is also There are attributes and some usages here

Create table row:

Create columns (cells):

Note: By default, columns in each row Numbers are unified.

table : display:table;

html table table features:

1. Exclusive row

2. Width adaptive (determined by content)

html table’s table attributes:

1, < table> Attribute

1.width: Set the width of the table

2.height: Set the height of the table

3.align: Set the height of the table in its parent element Horizontal alignment, value: left, center, right

4.border: border, border width, value in px, px can be omitted

5.cellpadding

off OUTCELL margins

. The distance between cells or between cells and tables

7.bgcolor: background color

2.attribute in table

1.align: The horizontal alignment of the content of this line

2.valignThe vertical alignment of the content of this line

Values: top, middle, bottom

3.bgcolor

3.attribute in table

width

    height

    • align

    • valign

    • bgcolor

    • colspan: Set cells to span columns

    • rowspan: Set cells to span rows

  • Also Other tags in the table:

1,

Function: Define the title for the table

Position: Centered display

 标题
Copy after login

2, row title or column title

directly above the table Column title: Each column in the first row, bold, horizontally centered Effect display

Row title: The first column in each row, bold, horizontally centered effect displayRow (column) title:

3. Complex application of tables

1. Row grouping

The table can be divided into 3 parts

1. Table header

2. Table body3. Table foot< /tfoot>
Copy after login

Note: If the table rows are not grouped, then by default they all belong to tbody

2. Irregular tables

Each The number of columns in a row is not uniform.

1. Cross-columnMerge columns, let the specified cell move horizontally to the right, merge several cells (including itself)

Syntax: colspan attribute of td

2. Cross rows

Merge rows, let the specified cells go vertically downward, merge several cells (including yourself)

Syntax: rowspan attribute of td

Note: Whether it is across rows or columns, the merged cells must be deleted from the code

3. Nesting of tables

In A table has another table embedded in it

The nested table must appear in
Copy after login

html table table unique style attributes

1. Border merge of html table table style attributesAttribute: border-collapse

Value:1.separate: Default value, separate border mode

1.collapse: Border merge mode

2. Border margin of html table table style attribute

1. Function: Set the distance between adjacent cell borders (similar to cellspacing)

2. Attribute: border-spacing

Value:

1. Take 1 value

which means the horizontal and vertical spacing are equal

2. Take 2 values

First The horizontal spacing represented by the first value

The vertical spacing represented by the second value

Separated by a space between the two values

3.Requirements

border-collapse must be separate

It must be valid in the separated border mode

3. The title position of the html table table style attribute

;< caption>>

Function: Change the title position from the default position to below the table

Attribute: caption-side

Value:

1. top: Default

2. Bottom: The title is below the table

4. Display rules for html table table style attributes

1.Function

Specify how the browser layouts a table. It actually specifies the algorithm rules of the cell

Default algorithm: The width of the cell is determined by the content and is not limited by the set width value.

2. Attribute: table-layout

Value:

1, auto: default value, automatic, column width is determined by the content

2 , fixed: fixed table layout, column width is determined by the set value.

3. Automatic table layout & fixed table layout

1. Automatic table layout (auto)

The size of the cell will adapt to the content size

In When the table is complex, loading will be slower

Suitable for use when the size of each column is uncertain

Traditional table presentation method

2. Fixed table layout (fixed)

The size of the cell is determined by the set value, regardless of the content.

It will speed up the display of the table, and the browser will not need to calculate it after loading the first row.

4. Hidden display effect

Attribute: visibility:collapse

Used on table elements to delete a row or column without affecting the entire layout of the table

Thank you for reading this article. If you have any questions or questions about this, you can ask below.

There is another article about this advanced version, welcome to click:Introduction to the style of the html5 table tag (with an example of html5 table css centering)

[small Related articles edited by editor]

html What is the function of em tag? The difference betweenandtags

html What does the optgroup tag mean? About the usage and attribute instance analysis of html optgroup tag

The above is the detailed content of What is html table? How to use various attributes in the

tag. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html table
source：php.cn
Previous article：What does the html style tag mean? Detailed explanation on how to use the style tag Next article：What is the color attribute of HTML font tag? Introduction to the usage of fontcolor (with color code table)
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
What is the difference between Text and LongText in Laravel migration? The migration file parts are listed below: Schema::create('samples',function(Blueprint$tab...
From 2023-11-08 16:42:35
0
2
278
sqlalchemy.exc.ArgumentError: list argument must contain only tuples or dictionaries I've been trying to use sqlalchemy to dump data into a mysql database. When I try to do th...
From 2023-11-07 21:06:02
0
1
286
Laravel database schema, nullable foreign keys I have these two database tables: User table Partner table User table will handle this kin...
From 2023-10-17 14:43:49
0
2
294
Can PHP PDO statements accept table or column names as parameters? Why can't I pass a table name to a prepared PDO statement? $stmt=$dbh->prepare('SELECT*...
From 2023-10-17 12:46:05
0
2
247
How to protect PHP from SQL injection? If user input is inserted into a SQL query without modification, the application is vulner...
From 2023-10-08 15:42:46
0
2
265
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！