Web Front-endHTML TutorialWhat is html table? How to use various attributes in the 
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, 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.1.align: The horizontal alignment of the content of this line
2.valign The vertical alignment of the content of this line
Values: top, middle, bottom
3.bgcolor
3.width
- height
- align
- valign
- bgcolor
- colspan: Set cells to span columns
- rowspan: Set cells to span rows
- Also Other tags in the table:
Function: Define the title for the table
Position: Centered display <table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
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 display Row (column) title:
1. Row grouping
The table can be divided into 3 parts
1. Table header
2. Table body
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>Note: If the table rows are not grouped, then by default they all belong to tbody
2. Irregular tablesEach The number of columns in a row is not uniform.
1. Cross-column Merge 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 tablesIn A table has another table embedded in it
The nested table must appear in
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>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 attribute1. 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
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 between and tags
The above is the detailed content of What is html table? How to use various attributes in the
