Building tables

Building tables

Tables in the "original" sense of this word when composing Web pages are of course used for their direct purpose, but not as ubiquitous as they are used for page layout. With the help of them the page of the site is divided into several parts, where the number of parts is not limited. Along with their great positioning capabilities to drgug to a friend and a wide choice of structuring - the way of page layout with tables makes the best for today a tool for a Web designer. There are two more ways to fill the pages - using design tools and using frames . The first having advantages in ease of use (objects are positioned by the user visually without knowing the HTML language) have a significant drawback - they create pages only for a specific screen extension. On other extensions the page will look incorrect. With frames, things are even worse - they are not "seen" by search engines. Therefore, almost always apply the tabular method, and you suggest to approach this topic with special attention.

Table Tags

There are only four tags for making tables. They need to know by heart :

  1. <TABLE> - Indicates that a table will be created on the page.
  2. <TR> - Forms a row in the table.
  3. <TD> - forms a cell in the table.
  4. <TH> - indicates where the header will be in the table.

The opening and closing tag is called the container . Containers <TD> the contents of a cell </ TD> are inserted into containers <TR> a table row </ TR> (both can be of any number), the latter in turn in the <TABLE> table as a whole </ TABLE> . If necessary, the <TD> tag changes to <TH>. It's as simple as a Russian matryoshka. Here's an example:

<TABLE> <TR> <TD> </ TD> <TD> </ TD> </ TR> <TR> <TD> </ TD> <TD> </ TD> </ TR> </ TABLE>

Inserting a table inside another table is necessary in the container <TD> </ TD> and nothing else. Example:

.... another table .... <TD> <TABLE> insertable table </ TABLE> </ TD> .... another table ......

In the HTML-code for convenience, we need to write each tag from a new line. But if you write everything in the form shown above, then you will not see anything in the browser. The browser does not "see" any parameters of the table or tables. They are specified using attributes with their values.

The 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 - width of the table (value in pixels ( px ) or percent)
  • HEIGHT - the height of the table (the value in pixels ( px ) or percent)
  • ALIGN - alignment of the table on the page (values: left, right, center )
  • BORDER - the thickness of the table frame (the value in px, possibly - zero (invisible frame)
  • BORDERCOLOR - specifies the color of the table border
  • BGCOLOR - table background color
  • BACKGROUND - sets the table background image
  • CELLSPACING - distance between cells in the table
  • CELLPADDING - the distance between the cell boundary and the text

The attributes of the <TD>

Attributes of table cells have the same names and dimensions of 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 vertical alignment attributes of VALIGN with top (top), middle (Middle) and botton (bottom) and COLSPAN - a combination of cells in a group with a numerical value equal to the number of cells to be merged.

The attributes of the <TR> tag

  • WIDTH - width of the table row (values ​​in pixels ( px ))
  • HEIGHT - height of the table row (values ​​in pixels ( px ))
  • RULES - the type of internal lines (values ​​- all , rows , cols , none ,
  • FRAME is the type of external lines (the values ​​are box (all), lhs (left), rhs (right), above , below , vsides (left and right), hsides (bottom and top), volid )
  • COLGROUP - the dividing line between groups of cells

To all the above attributes on this page, it's worth adding that they do not need to apply all at once to any tag, you will only increase the page size. They are applied as needed.

In the construction of tables, there is one more <TBODY> tag . It is intended for grouping table elements and is optional.

Now let's make simple layout of the page to fix the material using the table. Open any text editor. If you want, that there were no 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 screen expansion modes.

The task:

In the compiled table, experiment with the text, aligning it differently with respect to different cells and repeat the same thing, but with tables.