Creating tables

The table consists of rows and columns of cells that can contain text and pictures. Usually tables are used to organize and present data, but the possibilities of tables are not limited to this. With the help of tables, it is convenient to make layouts of pages, arranging fragments of text and images in the required manner.

To add a table to a web page, use the <TABLE> container tag. The table must contain at least one row and column (example 1).

Example 1. Creating a table

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Table </ title>
</ Head>
<Body>

<Table>
<Tr>
<Td> Table Contents </ td>
</ Tr>
</ Table>

</ Body>
</ Html>

To add rows, use the <TR> tag. To separate the rows into columns, the <TD> and <TH> tags are used (example 2). The difference between these tags is as follows. The <TH> tag is for creating headers, the contents of such a cell are indicated by boldface and centered (example 2). Otherwise, these tags act in the same way.

Example 2. Table cells

Valid HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Table </ title>
</ Head>
<Body>

<Table border = "1">
<Tr>
<Th> Cell 1 </ th>
<Td> Cell 2 </ td>
</ Tr>
<Tr>
<Th> Cell 3 </ th>
<Td> Cell 4 </ td>
</ Tr>
</ Table>

</ Body>
</ Html>

The location of the table cells is shown below.

Fig. 1

Fig. 1. Table view

Table Features

Each table parameter has its own default value. This means that if some attribute is omitted, it is implicitly present, and with some meaning. Because of what the form of the table can be quite different than the developer suggested. To understand what you can expect from tables, you should know their explicit and implicit features, which are listed below.

  • One table is allowed to be placed inside the cell of another table. This is required to represent complex data, or when one table acts as a modular grid, and the second, inside it, is already a normal table.
  • The table dimensions are not initially set and are calculated based on the contents of the cells. For example, the total width is determined automatically based on the total cell content width plus the width of the borders between cells, the fields around the content that are set via the cellpadding parameter and the distance between cells that are determined by the cellspacing value .
  • If the table is given its width in percent or pixels, then the contents of the table are adjusted to the specified sizes. So, the browser automatically adds line breaks to the text so that it fits perfectly into the cell, and the width of the table remains unchanged. It happens that the width of the contents of the cell can not be changed, as, for example, when adding pictures to a cell. In this case, the width of the table increases, in spite of the indicated dimensions.
  • The table frame, if you add the border parameter to the <TABLE> tag, is initially displayed as three-dimensional. The addition of the bordercolor parameter turns the frame into a monochrome one, thus eliminating the effect of three-dimensionality.
  • While the table does not fully load, its contents will not be displayed. The fact is that the browser, before showing the contents of the table, must calculate the required cell sizes, their width and height. And for this it is necessary to know what is in these cells. Therefore, the browser waits until all that is in the cells is loaded, and then displays the table.

Copyright © www.htmlbook.ru