What is a table? Introduction to tables in html-HTML Tutorial-php.cn

This article brings you the content about what is a table? The introduction of tables in HTML has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is a table? A table is a structure arranged by rows and columns. Data is presented according to rows and columns for page layout. This layout method is outdated. It is recommended to use p css to implement page layout.

How to create an HTML table: An HTML table consists of a table tag, a caption tag, and one or more tr, th or td tags:

1. The table tag is used to define the table, and the entire table contains In the

and

tags;

2. The caption tag defines the table title; Container, each row can contain multiple cells, represented by and tags; Within the tr tag, each cell is represented by a pair of and tags or a pair of and tags. The specific table content is placed in this pair of td tags. Or in the th tag, the syntax is as follows:

<table>
	<caption>表格标题</caption>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

Copy after login

Note: The difference between th and td: th defaults to bold and centered presentation in the cell.

Some common label attributes of table

1. Border label attribute: Set the width of the table border (unit: px); the border attribute will set the width of the table border for each cell. Add a border and surround the table with a border; if the value of the border attribute changes, then only the size of the border around the table will change, and the border inside the table will be 1 pixel wide; it is recommended to use the border style attribute to set the border, and do not use the border tag attribute Set the border, 2. Width tag attribute: Set the

width of the table

. It is recommended to use the width style attribute to set the table width. Do not use the width tag attribute setting. This tag attribute has multiple values. :

value describe pixels Set the width in pixels (example: width="50"). % Sets the width as a percentage of the containing element (example: width="50%"). 3. align label attribute: Specify the alignment of the table relative to the surrounding labels. It is recommended to use the float style attribute to achieve this effect. This label attribute has multiple values:

value describe left Align table left. right Align the table right. center Center align the table.

4. bgcolor label attribute: Specify the background color of the table. It is recommended to use the background-color style attribute to achieve this effect. This label attribute has multiple values:

value describe color_name Specifies that the color value is the background color of the color name (such as "red"). hex_number Specifies the background color as a hexadecimal value (such as "#ff0000"). rgb_number Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").

5. Cellpadding tag attribute: Set the distance between the cell boundary and the cell content (unit: px). It is recommended to use padding style attribute to achieve its effect.

6. Cellspacing tag Attributes: Specify the spacing between cells (unit: px)

The above lists the commonly used tag attributes of the table tag. In addition, the table tag also has three tag attributes: frame, rules and summary, but Because frame and rules do not support this attribute in the Internet Explorer browser, and the summary tag attribute will not produce any visual effects in the browser, these three tag attributes are ignored.

tr label attribute

1. align label attribute: Set the horizontal alignment of the cell content in the table row. This label attribute has multiple values:

left Align content left (default). right Right align content. center Center align content. justify Stretch the rows so that each row is equal length (like in newspapers and magazines). char Align content to specified characters. Note: The browser does not support this tag attribute value

2. bgcolor label attribute: Set the background color of table rows. It is recommended to use the background-color style attribute to achieve this effect. This label attribute has multiple values:

value describe color_name Specifies that the color value is the background color of the color name (such as "red"). hex_number Specifies the background color as a hexadecimal value (such as "#ff0000"). rgb_number Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").

3. valign label attribute: Set the vertical alignment of the cell content in the table row. This label attribute has multiple values:

value describe top Align content top. middle Center-aligns content (default). bottom Align content down. baseline Align with baseline.

th and td label attributes

1. align label attribute: Set the horizontal alignment of the cell content. This label attribute has multiple values:

value describe left Left align content (td tag default). right Right align content. center Center align content (th tag default). justify Stretch the rows so that each row is equal length (like in newspapers and magazines). char Align content to specified characters. Note: The browser does not support this tag attribute value

2. bgcolor label attribute: Set the cell background color. It is recommended to use the background-color style attribute to achieve this effect. This label attribute has multiple values:

value describe color_name Specifies that the color value is the background color of the color name (such as "red"). hex_number Specifies the background color as a hexadecimal value (such as "#ff0000"). rgb_number Specifies the color value as the background color in rgb code (e.g. "rgb(255,0,0)").

3. valign label attribute: Set the vertical alignment of cell content. This label attribute has multiple values:

top Align content top. middle Center-aligns content (default). bottom Align content down. baseline Align with baseline.

4. Width label attribute and height label attribute: Set the width and height of the cell. It is recommended to use the width style attribute and height style attribute to set the cell width and height. Do not use the width label attribute and height label attribute. Setting, this label attribute has multiple values:

value describe pixels The width or height value in pixels (such as "100px"). percent A width or height value as a percentage of the containing element (such as "20%").

5. Nowrap label attribute: Set whether the content of the cell wraps.

6. Colspan label attribute and rowspan label attribute: Set the number of columns and the spanned by the cell respectively. Number of lines

Related recommendations:

html What does the small tag mean? Examples of how to use the small tag
What is the color attribute of the HTML font tag? Introduction to the usage of fontcolor (with color code table)

The above is the detailed content of What is a table? Introduction to tables in html. For more information, please follow other related articles on the PHP Chinese website!