Basic learning tutorial on table tag in HTML

Using the table tag to display table content on the Web is one of the most basic functions of HTML. Here we will take a look at the basic learning tutorial of the table tag in HTML. Friends who need it can refer to it

The tag composition of the table
The table in HTML consists of

as the main tag, and the browser will interpret the tag as a table. Rows in the table are defined using the tag. The tag is a subclass of the tag. Setting several tags can divide the table into several rows. The tag, so each row needs to set a corresponding number of , and are rarely used because browsers do not support them well.

Table and border attributes
The table itself can define the border attribute to determine the width of the table border. The value of this attribute is displayed in numerical units by default, such as border="1" The value is in px. Note, do not add any unit after the border value, otherwise the value will not be recognized correctly.

Header of the table
In

tag is used to define the columns of the table. The

tag is also a subclass of the

tags to separate the columns and form a Complete form. The tag combination relationship of the table is: <table> <tr> <td>我是单元格1</td> <td>我是单元格2</td> </tr> </table> Any html tags such as text, pictures, lists, paragraphs, forms, horizontal lines, etc. can be inserted into the table, and can even be used for page layout . However, the table layout has problems such as too long code redundancy, non-compliance with HTML specifications, and unfriendly search engines. Therefore, it is recommended that you try not to use tables for page layout unless a table is really needed on the page. The remaining

,

, you can set the header through the tag. It belongs to the same level, and the header usually appears in front of the tag. For a table, the header is not necessary and can be inserted as needed. The text within the

tag. The	tag of the table header is the same as the
tag will be automatically bolded. Merge of cells The merging of cells is divided into vertical merging and horizontal merging. When merging, you need to determine whether there are corresponding numbers of cells in other rows and columns. Horizontally merge cells using the colspan attribute, whose value is a number that determines the number of cells to be merged. For example, colspan="2" means merging two cells to the right. Vertical merging of cells uses the rowspan attribute, which is the same as the horizontal merging attribute. It also determines the number of cells to be merged in numerical form. For example, rowspan="2" means merging two cells downward. Example demonstration code: <table border=“1”> <tr> <th>姓名</th> <th colspan=“2”>电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table><h4 id="横跨两行的单元格">横跨两行的单元格：</h4> <table border=“1”> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan=“2”>电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> Example demonstration effect: cell Margin Table has padding function similar to padding style. By defining the cellpadding attribute within the tag, you can set padding for all labels in the table is 10px units Cell spacing The spacing between cells is to set the outer margin of the tag. This is also similar to the margin in the css style. By defining the cellspacing attribute in the elements under the tag. The parameter of the cellpadding attribute is that the value is in the form of a number to determine the size of the margin. For example, cellpadding="10" means that the inner margin of all tag, it can be used under the label Set margins on all td elements. This attribute also determines the size of the margin in the form of a number. For example, cellspacing="10" means that the margin of all tags in this table is 10px Set the background for the table The table can set any picture as the background for the table or cell through the background attribute. Its usage is very similar to the background in CSS. Set the corresponding image path for the background to make the cell display the corresponding image. For example, background="table_bg.gif" Alignment of table contents The alignment of tables is divided into horizontal alignment and vertical alignment. They are the align attribute and the valign attribute respectively. Insert these two attributes into the corresponding tag to complete the alignment of text or images in the cell. Horizontal alignment align has three values: left left alignment, center horizontal centering, right right alignment Vertical alignment valing also has three values: top top alignment, middle vertical centering, bottom bottom alignment, and baseline alignment. The baseline alignment may not be understood literally. In fact, the baseline alignment means that the text appears in the upper middle part of the table instead of in the center. If the text is not large, the effect is similar to middle, slightly higher than middle. PS: table-layout statement in CSS This statement can be used to specify the style of table display, such as CSS CodeCopy content to clipboard ##table { table-layout: fixed } It can take three values: * auto (default) * fixed * inherit auto means that the size of the cell is determined by the content. fixed means that the size of the cell is fixed and is determined by the first cell with a specified size; if all cells do not have a specified size, it is determined by the default size of the first cell; if the content in the cell exceeds the cell The size of the grid is controlled by the overflow command in CSS. Microsoft claims that using this command, the display speed of the table can be accelerated by 100 times. By the way, in order to speed up table display, it is best to specify the width and height of the table in CSS (or the width and height attributes of the table tag) in advance. For more related articles on the basic learning tutorial of table tags in HTML, please pay attention to the PHP Chinese website!