Create a web page using tables

The contents are arranged according to specific row and column rules to form a table. In daily life, work, or webpage design, tables can make information easier to understand. HTML has a strong table function, allowing users to easily create tables of various types and perform specific modifications to the table, so that the web page is more lively. The HTML table model allows you to arrange various data (including text, pre-formatted text, images, links, forms, form fields, and other tables) into rows and columns, to obtain the specific table effect.

The role of a table in web design is very important. It can be said that if your table is not good, it is impossible to design a good web page. Most beginners get started with tables and have a certain understanding of the tables. However, it is important to carefully understand the table code structure to implement a truly meticulous or even powerful function! Here we will introduce in detail various commonly used table tags, tips, and table usage problems. After learning about and mastering these content, you will find that table is so friendly and easy to use!

1. Create a basic table

A table starts with <table> and ends with </table>. The table content is defined by <tr>, <th>, and <td>. <Tr> indicates the number of rows in a table. <tr> <th> indicates the number of columns in the table and the column name, the number of columns is <th>. <td> a table consisting of <tr> and <th> is filled.

There are not many important basic tags in the table, but each tag has many attributes. Considering that all these attributes are listed at once, it may make beginners feel overwhelmed, therefore, we still learn the basic attributes from the appearance of the table (that is, the style of the table displayed in the browser.

Before explaining this, let's take a look at the basic structure of the table. The following figure shows a table with three rows and three columns.

 

There are two concepts to understand:TableAndCell. Their relationship is the relationship between the whole and the local, just like the bricks and walls. There are a total of nine cells in the table in the above three rows and three columns. Since the table attributes and cell attributes mentioned later are many of the same, we must make it clear. As mentioned earlier, the most basic tags of a table are <table>, <tr>, and <td>. You can set up the following concept: to describe the attribute tags of the entire table in <table>, the attribute tags of the description cells are placed in <tr> and <td>. With such a concept, it is easier to learn.

1. Table and cell size, table border width and color, and cell border color

The table and cell size are described using the "width = #" and "height = #" attributes. "width = #" indicates width, and "height = #" indicates height ,, # It is a number in pixels or percentages. The border width of the table is described by the "border = #" attribute, and # is the width value. The unit is pixel. The border color of the table is described by the "bordercolor =" # "attribute, # It is a hexadecimal 6-digit value in the format of rrggbb, indicating the red, green, and blue components. Or 16 custom color names. For more information, see text color. The color attribute of the cell border is the same as that of the table,Only applies to IE. The following is a two-column table with a width of 300, a height of 80, a border width of 4, and a border color of "FF0000". The width of the first cell is 200, and the height is 80, the border color of the second cell is "0000FF ".