What is a table? Introduction to tables in html

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

      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>

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

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

. 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.

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

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!