Tables in the "original" understanding of the word in the preparation of Web-pages of course used for their intended purpose, but not as ubiquitous as they are used in page layout. With them, the page of the site is divided into several parts, where the number of parts is not limited. Along with their large positioning options for friends and a wide choice of structuring, the way of marking pages with tables makes it the best tool for the web designer today. There are two more ways to fill the pages - using constructors and using frames . The first having advantages in ease of use (objects are positioned by the user visually without knowledge of the HTML language) have a significant drawback - they create pages only for a specific screen extension. On other extensions, the page will look incorrect. Frames are even worse - search engines do not "see" them. Therefore, almost always use the tabular method, and we suggest that you approach this topic with particular attention.
There are four tags for creating tables. They need to know by heart :
- <TABLE> - indicates that a table will be created on the page.
- <TR> - forms a row in the table.
- <TD> - forms a cell in the table.
- <TH> - indicates where in the table will be the title.
The opening and closing tag is called a container . Containers <TD> content cells </ TD> are inserted into containers <TR> table row </ TR> (both can be as many as you like), the latter in turn already in the <TABLE> table as a whole </ TABLE> . If necessary, the <TD> tag is changed to <TH>. It's simple, as the "Russian nesting doll". Here is an example:
<TABLE> <TR> <TD> </ TD> <TD> </ TD> </ TR> <TR> <TD> </ TD> <TD> </ TD> </ TR> </ TABLE>
You need to insert the table inside another table into the <TD> </ TD> container and nothing else. Example:
.... another table .... <TD> <TABLE> table being inserted </ TABLE> </ TD> .... another table ......
For convenience, in HTML code, each tag should be written from a new line. But if you write everything in the form above, you will not see anything in the browser. The browser does not "see" any table or table parameters. They are set using attributes with their values.
Attributes of the <TABLE> tag
Attributes for the <TABLE> tag are needed to determine the appearance of the table (dimensions, color, thickness of lines), as well as the location of the table on the page. Below is a list of them:
- WIDTH - the width of the table (value in pixels ( px ) or percentage)
- HEIGHT - the height of the table (the value in pixels ( px ) or percentage)
- ALIGN - alignment of the table on the page (values: left, right, center )
- BORDER - the thickness of the frame of the table (the value in px, possibly - zero (invisible frame)
- BORDERCOLOR - defines the color of the table frame
- BGCOLOR - table background color
- BACKGROUND - sets the table background image
- CELLSPACING - the distance between cells in the table
- CELLPADDING - the distance between the border of the cell and the text
Attributes of the <TD> tag
Table cell attributes have the same name and dimension values as the tables with the only difference that the last two attributes in the list (see above) do not apply to them, but the cell vertical alignment attributes VALIGN with the values top (top) and middle are added. (middle) and botton (bottom) and COLSPAN - merging cells into a group with a numeric value equal to the number of cells to be merged.
Attributes of the <TR> tag
- WIDTH - width of the table row (values in pixels ( px ))
- HEIGHT - height of the row of the table (values in pixels ( px ))
- RULES - type of internal lines (values - all (all), rows (horizontal), cols (vertical), none (none)
- FRAME - type of external lines (values - box (all), lhs (left), rhs (right), above (top), below (bottom), vsides (left and right), hsides (bottom and top), volid (no )
- COLGROUP - dividing line between groups of cells
To all of the above attributes on this page, you should add that they do not need to be applied all at once to any tag, you only increase the page size. They are used as needed.
There is another <TBODY> tag in the construction of the tables . It is intended for grouping table elements and is optional.
Now let's make a simple page layout using the table to fix the material. Open any text editor. If you want to avoid indents from the edges at a screen resolution of 800x600, then in the <BODY> tag write down:
<BODY leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0">
- Next, in the <BODY> container, type the following:
- <TABLE width = "780" height = "580" border = "0" align = "center"
- <TR> <TD colspan = 2 height = "100" bgcolor = "red" align = "center"> Header </ TD> </ TR>
- <TR> <TD width = "200" bgcolor = "gray"> Menu </ TR> </ TD>
- <TR> <TD width = "580"> Text </ TR> </ TD> </ TABLE>
- Save and look in the browser in different modes of screen expansion.
Experiment in the table with the text, aligning it differently with respect to different cells and repeat the same thing, but with the tables.