topic

All in the frameworks

In due time, only starting to study elements of web-design, I have faced a problem ridiculous, but familiar to each beginning{starting} web-master: how to place on page all elements so that they were harmoniously combined and, thus, did not prevent to each other.

Perejdja straight away, I began to use layers, but have collided{faced} that, what not all browsers of them supported, so, could not format my pages correctly. It has forced me to pay attention to tables.

The experience got further, has shown, that tables, at all banal simplicity of the construction, are not too simple. To be mistaken in formatting page with the help of tables also it is easy, as well as to build them. Thus, mistakes have an effect unexpectedly, as though stealthily, on different browsers differently. Also it is necessary to spend a lot of time for revealing and elimination of a mistake so that to not generate new.

The subject of given clause{article} can call an indulgent smile the one who counts itself assom in web-design, nevertheless, I count on attention of those who only began the way from this field, or is always open for perception{recognition} of the experience saved up by others.

1. Tables as such.

For the beginning, I shall remind the most simple: as the skeleton of the table is created. All begins with pair tegov table: <table> </table>. They have the standard parameters align, border, cellspacing, cellpadding, width which are responsible for alignment of the table concerning a window of a browser, for presence of a framework at the table, for distance between cells of the table and spaces inside cells, for width of the table (as in percentage, and in pixels). The pair tegov, determining a line of the table further follows: <tr> </tr> Standard parameters for a line are align and valign, responsible for alignment of cells inside a line across and on a vertical. Last pair tegov is tegi cells: <td> </td>. With the same parameters, as at a line. Besides exist also tegi, allowing in the code to divide the table into corresponding sections: thead, th, tbody and tfoot. Thus, TN already comprises the formatting, allowing to allocate fat and to level on the center the text of heading of the table. To tell the truth, all this is meaningful, if the table is created with the purpose to show the table in the html-document. In the most simple variant (in view of all above-stated tegov) the tabulared code looks so:

<thead>

<th valign=top colspan=3> Heading </th>

</tr>

</thead>

<tbody>

</tr>

</tbody>

<td align=center valign=top colspan=3> the Conclusion </td>

</tr>

</tfoot>

</table>.

All this as easy as shelling pears, you will say. Also what here complex{difficult} and dangerous?

First, danger in parameters. Not all parameters should be applied, the same as and not all parameters of that followed, we use. So, for example, for tega tr application of parameters of alignment is not necessary. However they are obligatory (!) for application with tegom td. Also the typical mistake, with tegami tr, td and th can not be applied parameter width, however he is very important, so influences conformity of an arrangement of cells in the table be relative each other and tables as a whole.

Thus, creating the table, it is necessary to specify width of the table (and sometimes and its{her} height - for "blagozvuchnosti" design), width of a line and cells / cells, horizontal alignment of the table and a cell, and also distance between cells and inside - jacheechnye spaces. Thus the width of each cell in line if it is a little bit{some} of them, should be accordingly specified so that their sum corresponded{met} to width of a line. However if to specify width of cells, but to lower{omit} width of a line, the unpleasant effect - "eating" of objects (for example, buttons html), located in cells can appear.

I ask to pay attention to parameter colspan, present in cells of heading and the conclusion of the table. He is applied, when cells in lines more than one and specifies, for the width skol`kikh columns the given cell will be stretched{will be dragged out}. The parameter similar to him and concerning quantity{amount} "perekryvaemykh" of lines, is called rowspan. The miss{passing} of these parameters, there, where they are necessary, is very often mistake and results in distortion of the image received in a browser.

Except for key parameters, in tabulared tegakh can be applied additional which especially do not influence correct formatting of the table. These are standard html-parameters of background color, color of a framework (the basic, "light" i "dark"), parameters style and class cascade tables of styles. Here it is important to not be mistaken with use of colors and styles that your table looked harmoniously and did not prick an eye diversity and slovenliness of design. Also, it is necessary to take into account, that netscape navigator by default uses for registration of a framework of the table a volumetric line. He can "paint" in part her{it} the color specified by you, but does not recognize a "be bright - dark" variant.

Second, danger disappears in tables. Quite often, creating design of page with the help of the table, we overlook, that cells namertvo are connected with each other. Even colspan/rowspan do not allow us to be released{exempted} completely from those frameworks in which us exhaust stolbcy and lines of the table. And in fact the design demands, more often, a "free" arrangement of elements on page.

In this case it is necessary to resort to " a method of the Nested doll " at which the basic table is only the carrier of other, functionally significant tables in which elements of design settle down. On an example it looks as follows:

<! - Heading->

<td align=center valign=top width=100 %> the Table in heading </td> </tr>

</table>

<! - the End of Heading->

</td>

</tr>

<! - the Cell 1->

<td align=center valign=top width=100 %> the Table in an average part </td> </tr>

</table>

<! - the End of the Cell 1->

</td>

</tr>

<! - the Conclusion->

<td align=center valign=top width=100 %> the Table in the end </td> </tr>

</table>

<! - the End of the Conclusion->

</td>

</tr>

</table>

Such way of positioning of elements on web-page allows to place objects rather any way as functional tables "are adhered" only to the size and a format of cells in which they are, but do not depend on the size and a format of the basic table as a whole. Therefore, at such positioning, there is no effect of extension, for example, columns with buttons and links after lengthening of the central column of web-page at an insert in last the huge size of the text.

Besides such way influences, strangely enough, formatting of paragraphs of text blocks on page. The matter is that experience shows - netscape does not understand alignment justify in a cell of the table. For this purpose in a cell for him it is necessary teg <p align=justify>. But he also refuses to understand <p align=justify> if teg is in a cell which operates with parameter colspan. "Nested doll" saves the situation. netscape does not transfer a format of a cell to the table located in her, and considers{examines} last as entirely an independent element.

In " a method of the Nested doll " it is necessary to be close{attentive} to in what units you set the size of tables - in percentage or in pixels - and you thus have set what alignment. Again taki, owing to capricious character netscape'?. Sometimes, it is necessary to specify the size of the external table in pixels if you want to specify in the subsequent the sizes of internal tables in percentage, and alignment should be necessary central. Otherwise, can happen so, that the internal table will be stretched{will be dragged out} on huge distance, ugly having deformed the external table and all design of page as a whole. A simple example:

1) <table align = "center" width = " 100 % ">

2) <table align = "center" width = "600">

3) <table align = "left" width = "600">

4) <table align = "left" width = " 100 % ">

In first three variants, under the specified conditions, no trouble will not take place. However in the fourth, the table will stretch{will drag out} so, that you cannot see its{her} right edge at all!

2. Tables and the schedule.

Tables are the irreplaceable tool of any web-designer for accommodation schedules on page. It already an axiom. So, using the table, it is possible to group the separate graphic files which are carrying out independent functions, in the finished image, for example heading.

However, accommodation schedules in cells of the table too can be accompanied by fulfilment of a lot of mistakes.

One of the most widespread mistakes is the insert of figure in a cell of the table without the use of parameter of alignment tega <img>. Actually, when figure is located in a cell one and not accompanied neither the text, nor any other objects, it is not important. Otherwise, absence of alignment becomes appreciable and can spoil all design.

The matter is that teg figure (image) does not inherit parameters of alignment of a cell, he only submits to them, as any other object in a cell. Therefore, for example, at any alignment in a cell, the text necessarily "will leave" under the image. But you want, that the text of it{him} "flowed round"? In this case, it is necessary to specify in tege img parameter of alignment align equal left or right. Then the image "will be softly surrounded" with the text.

Also it is meaningful to specify parameters of vertical and horizontal spaces from the image vspace and hspace as the spaces set for a cell also are not inherited.

In some cases, it is necessary, that the part of the text was deduced{removed} sideways from the image, and other left under him{it}. Thus, "watershed" should be very well swept up.

In this case, two variants are used. Or in tege <br> the parameter clear=left or clear=right accordingly is used, and in this case the part of the text after tega <br> will leave under the image, and in alignment of the last it is possible to use property middle, or, using, again taki, tabulared cells to place the image in one, the "lateral" text in next, and "bottom" - accordingly, in a cell located in a subordinate line and developed{unwrapped} for all this line (colspan=2). Certainly, last way gromozdok, but it is guaranteed, that similar accommodation correctly interprets any browser understanding the tables.

The second widespread mistake is discrepancy of the sizes of cells with the sizes of the inserted image. It is dangerous, when the sizes of the image exceed the sizes of a cell. In this case the cell is ruthlessly stretched{ruthlessly dragged out}, that, certainly, influences an arrangement of the next elements on page. For example, use of a graphic line as dividing feature, instead of <br>, without the coordination with the sizes of a cell of "carrier", can lead to to distortion of the sizes of the table. To avoid it, certainly, it is possible only the coordination of the sizes.

Except for mistakes, the inattention to standard opportunities tabulared tegov often is supposed. For example, who from you seriously thought of opportunities of parameters of a background which, by the way, are supported both lines, and cells? Certainly, with the help bgcolor it is possible to set color of the table, a line and a cell, both together, and separately. With the help background it is possible to insert the image as a background. In this case it will fill in all area of a cell, a line, the table. Here the most interesting also begins.

We can insert into one cell two various independent images, one atop of another, having created illusion of their level-by-level accommodation. One will be set by parameter background tega <td>, and another tegom <img>. It is necessary to not forget only, that the sizes of a cell should coincide with the sizes of the image (then the effect of "duplication" of a picture or its{her} "trimming"), placed in a background will not appear, and the independent image should be much less background, all sense of similar design differently is lost.

In the same way it is possible to group the image and the text that is reasonably useful at design, for example, links (only in this case the font should be the fixed size). It is not useless and is simple at use concerning the big finished images (for example, group photos) as a background...

Certainly, opportunities of tables are not boundless, but also not up to the end are opened. I have tried to describe their only small part in given clause{article} and, I hope, she will be of use to you.