Chapter 4.

Tables in HTML.

One of the most powerful and widely used in HTML funds are tables. The concept of a tabular data presentation does not need additional explanation. The HTML tables are used not only traditionally, as a data representation method, but also as a means of formatting Web pages. We give examples of actually existing documents in which a tabular view is a convenient way to build a document. In fig. 4.1 shows a typical example of using tables for representing numeric data broken through rows and columns. In fig. 4.2 Using the table serves only the objects of formatting a document, setting the mutual location of the page elements. When viewing such a document, it is not immediately seen that a table is used to build it, since the frames around its cells are not drawn.

The first version of the HTML language did not provide for special means to display tables, as it was mainly designed to write a simple text. With the development of the use of HTML documents, it became an urgent task of submitting data for which the presence of a number of rows and columns is typically. Creating documents containing data aligned in columns at first was carried out by using the simulated text, within which the necessary alignment was provided by the introduction of the desired number of spaces. Recall that the text inside the pair of tags

AND

It is displayed by monosine font, and all gaps and tabs are meaningful. Work on equalizing such text was performed manually, which significantly slowed down the creation of documents. Support for a table presentation of data has become the de facto standard, since it was originally implemented in all leading browsers and only after a significant time was fixed in HTML 3.2 specification.

Special tools for creating tables, however, do not cancel the use of the simulated text. The use of tables is not limited to data consisting of rows and columns. One of the applications is the organization of the location of a variety of data on the page, which may consist of simple text, images, other tables, etc. The rules for creating tables and the examples of their use are dedicated to this chapter.

Fig . 4.1. Typical example of HTML table

Fig . 4.2. Sample table without frames

Creating the simplest HTML tables

Consider first the minimum set of tags and their parameters, necessary and sufficient to create simple tables, and then move on to their detailed description.

Description of tables should be located within the document section . The document may contain an arbitrary number of tables, and the nesting of the tables is allowed to each other. Each table should begin by tag

And ending with tag. Inside this pair of tags there is a description of the contents of the table. Any table consists of one or more lines, each of which is given data for individual cells.

Each line begins tag (Table Row) and ended with tag. A separate cell in the string is framed by a pair of tags and (Table Data) or and (Table Header). Tag Usually used for table header cells, and - for data cells. Differences in the use consists only in the type of font used by default to display the contents of the cells, as well as the location of the data inside the cell. The contents of the cells of the type Displays a bold (Bold) font and is located in the center (Align \u003d Center, Valign \u003d Middle). Tag Cells By default, the data aligned to the left is displayed (Align \u003d Left) and in the middle (Valign \u003d Middle) in the vertical direction.

Tags and can not appear outside the description of the row of the table . Finishing codes, and Can be omitted. In this case, the end of the description of the string or cell is the beginning of the next line or cell, or the end of the table. Finishing table tag Cannot be omitted.

The number of rows in the table is determined by the number of opening tags , and the number of columns - the maximum number or Among all lines. Part of the cells may not contain any data, such cells are described by a pair of the following tags - , . If one or more cells located at the end of any string do not contain data, then their description may be omitted, and the browser will automatically add the required amount of empty cells. It follows that the construction of tables in which in different strokes there is a different number of columns of the same size is not allowed.

The table may have a heading that is a couple of tags and. Description Table header must be located inside tags

and anywhere, however, outside the description of any of the tags , or . According to the HTML language specification, the description of the description is headlines more strictly: it should be placed immediately after the tag and before the first . We recommend adhere to this rule.

By default, the table header text is located above it (Align \u003d Top) and is centered in a horizontal direction.

Listed tags may have parameters, the number and values \u200b\u200bof which are different. However, in the simplest case, tags are used without parameters that accept default values.

This information is quite enough to build elementary tables. We give an example of the simplest table consisting of two rows and two columns, the display of which is shown in Fig. 4.3.

Cell 1 line 1	Cell 2 rows 1
Cell 1 line 2	Cell 2 rows 2

Fig. 4.S. Example of the simplest table

View table on page

Consider the assignment of various parameters that can be used in tags describing the tables.

Table title

Tag header Table It has a single permissible ALIGN parameter that accepts the torque values \u200b\u200b(title over the table) or BotTom (title under the table). The ALIGN parameter can be omitted, which corresponds to the value of Align \u003d TOP. In the horizontal direction, the title of the table is always located on its center. The table may not have a header. As a header of the table, in most cases, simple text is used, which is governed by the HTML specification, but in reality between tags and Visible to record any HTML elements used in the section . Let us give an example of the title record of the table:

Title, located at the bottom of the lad

If this header description add to the above example, the table will be displayed as shown in Fig. 4.4.

Fig. 4.4.Table with heading

Microsoft Internet Explorer browser provides additional features to select the title location. The ALIGN parameter allows LEFT, Center and Right values \u200b\u200bfor horizontal alignment along with the values \u200b\u200bdescribed above. Note that this is one of the rare cases when the widespread parameter of Align can be used for horizontal alignment, and for vertical. For example, the record Align \u003d Right will provide the title arrangement pressed to the right side and placed on the table. If you write Align \u003d Bottom, then the same as in the example above, the title will be located under the table. However, dual use in one title of the Align parameter is unacceptable. Therefore, the special parameter for vertical alignment is additionally introduced - Valign, which takes the torque values \u200b\u200bor botTom. For example, for the title, disposed of at the bottom of the table with alignment to the left, the description has the following form:

The title, located at the bottom with alignment to the left

Table with a title description in Microsoft Internet Explorer will be displayed as follows (Fig. 4.5). If this example is viewed in Netscape, the title will be placed by default, i.e. above the table and in the middle in the horizontal direction.

Fig. 4.5. Horizontal Alignment Table Table Browser Microsoft Internet Explorer

Horizontal alignment capabilities Table header are the HTML specification extension, not supported by the Netscape Navigator browser, and therefore they should be used only in extreme need.

Tag Parameters

The main tag applied when creating tables is a tag

. It can be used with a number of parameters, each of which is permissible to omit. A set of permissible parameters depends on the browser. According to the HTML specification in Tag The following parameters can be used: Border, CellSpacing, CellPadding, Width, Align. Netscape IMICrosoft Internet Explorer browsers are allowed in addition to the following five parameters to use the HEIGHT and BGCOLOR parameters. Separate browsers also allow you to specify other parameters. Consider the appointment of commonly used tag parameters .

Border Parameter

The Border parameter manages the image of the frame around each cell, which, in fact, give the line grid lines, and around the entire table. The default frames are not drawn, and on the screen, the user will see only exactly the text of the table cells. There are many situations where the use of tables without frames is fully justified, for example, for multiscount lists implemented using tables, or setting the exact mutual position of the drawings and text. However, in most cases, for the traditional use of its tables, its cell is useful to separate the grid lines from each other, which facilitates the perception and understanding of the information contained in the table.

To add to the frame table, you must enable in the code

The Border parameter that may have a numerical value.

For example,

or .

The numerical value of the parameter determines the thickness of the frame in pixels drawn around the entire table, but it does not affect the thickness of the frames around each cell. In the absence of a numerical value, it is usually taken equal to the minimum value (1), although for different browsers, the frame display style may differ. The possibility of independent control of the display of the frame around the entire table and the frames around the cells are missing.

An example of a table with a frame of a thickness of 10 pixels is shown in Fig. 4.6.

Fig. 4.6.Table with frame thickness 10 pixels

The HTML 3.0 specification did not include a value for the Border parameter. This is done only in HTML 3.2. So, in particular, the early versions of Microsoft Internet Explorer did not allow the settings of the numerical value.

Note that in the absence of the Border parameter, the frames are not drawn, but it is left under them (this applies only to Netscape). The total size of the table in the absence of the Border parameter or its presence does not change (the exception is the case of the task Border \u003d 0). Thus, the minimum distance between two adjacent cells in these cases will be equal to double the thickness of the frame, i.e. two pixels. Locate the cells as close as possible to each other. It is possible to task Border \u003d 0, which means the absence of a framework. Some browsers may not support the task of the numerical value of the Border parameter, then the value equal to zero will be ignored, and the table will be drawn with the frames.

Let us give a few examples:

All three above-mentioned Netscape browser will be displayed differently. Note that there is a fairly unique case here, when you can not talk about the default value. The third example in which the Border parameter is omitted, differs from any example where this parameter is present. For Microsoft Internet Explorer, the second and third examples are identical, so for this browser, the default value of the Border parameter is zero.

Parameter CellSpacing

The parameter recording form: CELLSPACING \u003d NUM, where Num is the numerical value of the parameter in pixels that cannot be omitted. The Num value determines the distance between the adjacent cells (more precisely between the cells of the cells) both horizontally and vertically. By default, the value is taken equal to two. Note that traditionally in publishing systems adjacent cells of the tables have a common boundary. In HTML tables, the default place is left between them, which is clearly visible on the above figure (Fig. 4.6). When specifying CellSpacing \u003d 0 frames of adjacent cells, the uniform table of the table will be created and created (Fig. 4.7).

Fig. 4.7.Table with CELLSPACING \u003d 0

CellPadding

The parameter recording form is similar to CellSpacing. The Num value determines the size of the free space (indent) between the cell frame and the data inside the cell. By default, the value is taken equal to one. Setting the CellPadding parameter to zero can lead to the fact that some parts of the cell text may touch its frame, which looks not very aesthetic.

In fig. 4.8 shows an example of a table with the value of CellPadding \u003d 10.

Fig. 4.8.Table with CellPadding \u003d 10

CellPadding and CellSpacing parameters are very similar to each other. For a table without frames, changing one or another parameter leads to the same result. Both parameters affect the appropriate indents simultaneously horizontally and vertically. Unfortunately, separate control of horizontal and vertical retreats as it is done, for example, for indents from images (parameters HSPACE and VSPACE tag ), not provided.

All three parameters - Border, CellPadding and CellSpacing act independently of each other, if any of them are omitted, then its value taken by default is taken. In particular, if all the listed parameters are omitted, the minimum distance between data from adjacent cells will be 6 pixels (for Netscape). This value consists of two pixels for CellSpacing, one pixel for CellPadding and one pixel for the frame of each cell. The most compact table will be obtained by the task of the following description:

Only in this variant cells will be located close to each other. An example of using a table, all cells of which contain drawings of the same size, which must be placed next to each other.

Width and Height Parameters

When the tables are displayed, their width and height are automatically calculated by the browser and depend on many factors: the parameter values \u200b\u200bspecified in the description of the entire document given to the table, individual lines and cells, the contents of the cells, as well as the parameters specified when viewing a document in a different browser , for example, the type and size of the font, the size of the viewing window, etc. When you display the calculation of the sizes of tables is performed automatically, taking into account these factors, the attempt is made to submit a table in the most convenient way - to position the table so that it is placed and the viewing window. The general viewing scheme for large documents, as a rule, is reduced to a linear scrolling of the contents of the vertical document and reading the text, interpreted by various tables, images, etc. This applies to both HTML documents and conventional documents created in any text editors . Most of both text editors (for example, Microsoft Word) and HTML browsers automatically format text so (if possible) so that the string length does not exceed the width of the viewing window. This avoids the need to horizontal scroll of the document. Similar actions are made by browsers with tables - if possible, format them in such a way that the width of the table does not exceed the width of the viewing window. It can be concluded that the width of the tables is more important, the primary parameter, the calculation of which is performed primarily compared to the height.

In most cases, the dynamic definition of the table size gives an aesthetically proportionate image with the effective use of the real view of the viewing window. However, it is necessary to forcefully specify the width or height of the table. For this purpose, Width parameters are used (Table Width) and Height (Table Height) Tag

. Recording form: width \u003d num or width \u003d num%, where Num is a numerical value of the width of the entire table in pixels or as a percentage of the entire window size. Note that it is permissible to set values, large 100%, although it is difficult to imagine the case where it is necessary. Example:

.

Similar parameters can be set for individual cells. Note that setting the specific value of the parameter, for example, width \u003d 200 does not mean that the table will in any case will have the specified width, but only defines the recommended width that will be withstanding if possible. Let us explain it on the examples. Suppose there is a table, which in these conditions by default would have a width smaller than specified. In this case, the browser will increase the width of the table to the required by proportional expansion of all columns of the table. When the viewing window is narrowing, the table width will not be changed, and it may be necessary to view it a horizontal scrolling. If the default table has a width greater than specified, the browser will attempt to reduce its width due to, firstly, reduce the width of individual columns for which the specified width is greater required, secondly, the splitting of the text in separate cells into several rows with an increase in the height of the table. These actions may not provide the desired table size, and then it will have the minimum possible width. The same actions are made for tables that do not specify dimensions, when the viewing window is narrowed.

Specific table configuration algorithms for different browsers may differ slightly.

Parameter Align.

This parameter tag

Specifies the horizontal location of the table in the viewport. Valid values \u200b\u200b- Left (Left) and Right (Aligning Right). By default, the table is leveled on the left edge. Note that among the allowable values \u200b\u200bthere is no typical value for the alignment parameter - Center. In some sources in the HTML language, the center (centered) is given as permissible in this case. This corresponds to the HTML specification, but in practice and Netscape Navigator, and Microsoft Internet Explorer implements only two values. The fact is that the presence of the Align parameter in the tag Not only determines the location of the table, but it allows you to perform the flow around the table with the text from the opposite side similar to the streamlining of the pictures. The flow around the table with text on both sides is not envisaged in any cases. For more accurate flow management should use a tag
with the Clear parameter as well as it is performed for . If the Align parameter is omitted, the location on the right and / or to the left of the table will always be empty regardless of its width. If the table does not require text flow, you can achieve its location in the viewing window. For this, for example, you can make a table description inside the pair of tags. and.

We give an example of a table with flowing text, the display of which is shown in Fig. 4.9.

adult

population of St. Petersburg

Abram Alexander Alexei Albert. Anatoly Andrew Arkady Boris. Vadim. Valentine Valery Basil Victor Vitaly Vladimir Vladislav. Vyacheslav Gennady Georgy. Hermann Grigory Dmitriy

Evgeny Efim Ivan. Igor Il Ya Joseph Konstantin a lion Leonid Michael Nikolai Oleg Pavel Peter Novel Semen Sergey Stanislav. Edward Yuri. Yakov

Specified 43 most common names cover 92% of the sample.

Fig. 4.9. Table without frames with flowing text

This document consists of a table without a framework with Align \u003d Left alignment parameter, which allows the text following the table to the right of it. The table consists of only one line, which contains two cells. Each cell contains part of a non-measured list.

. Using a table to output a list is one of the ways forced location of the list in several columns, which also illustrates this example. The text, located on the right of the table, can not fit there all, and it will be continued after the table. Try on this example to reduce the width of the browser viewing window, and at some point all the text will be from the bottom of the table. Recall that for the forced interruption of the flow of text along the table (for example, if the subsequent text is not logically associated with the table and should be located below it) should be used by the code
With the Clear parameter set. For this example you need to record
or
. Some browsers allow the Clear parameter to record without meaning, but this is not recommended. To implement the same task, set multiple line translations
without the Clear parameter (as is done in the example before the text to shift it down into several lines) or several codes of the beginning of the new paragraph

Invalid decision.

We give a slight other example to create a similar page, the display of which is shown in Fig. 4.10.

Most common man's names

adult population of St. Petersburg

Abram Alexander Alexei Albert. Anatoly Andrew Arkady Boris. Vadim. Valentine Valery Basil Victor Vitaly Vladimir Vladislav. Vyacheslav Gennady Georgy. Hermann Grigory Dmitriy

Evgeny Efim Ivan. Igor Ilya AndOCIF Konstantin a lion Leonid Michael Hikolay Oleg Pavel Peter Novel Semen Sergey Stanislav. Edward Yuri. Yakov

These data were obtained on the basis of the analysis of the representative sample containing information about 5,000 men over the age of 18, living in St. Petersburg. Specified 43 most commonly encountered is 92% of the sample. The frequency of occurrence of each of the other names does not exceed 0.3%



Fig. 4.10. Table without frames containing three columns

In contrast to the previous example, there is no text that flows around the table. The entire document consists of one table with a heading containing three cells in one row. The first two cells completely repeat the previous example. In the third cell there is a text that comments on the content of the first two cells. There is no need to set forced text breaking, as described in the previous case. The entire text relating to the table must be located inside the third cell, and the subsequent text - after the end of the description of the entire table. Both examples when viewing on the full screen look the same, with the exception of the title, which in the first case is located in the middle of the two-column list, and in the second - is located in the middle of all three table columns. However, with a decrease in the viewing area in the last example, no part of the text can switch to the table below, thereby disturbing its structure.

Data formatting inside the table

Each separate cell inside the table can be viewed as an independent formatting area. All rules that act to manage text display can be used to format text inside the cell. Inside the cell is permissible to use almost all HTML elements that can appear within the body of the document , including tags that manage the location of the text -

,
,

---

, headlock codes - from

before

, symbol formatting tags<В>, , , , , , , TEGIVESTAGES hypertext links<А> and so on. Immediately emphasize that the scope of tags specified within a separate cell is limited to the limits of this cell regardless of the presence of the final tag. For example, if the color of the text is defined inside the cell - , even if there is no completion code Or arrange it through several cells or rows of a table, the following cell text will be reflected by the default color.

For data formatting within the table cells, the following parameters are provided.

The content of alignment of the contents of cells is Align and Valign. Can be used in codes , and . Align Horizontal Alignment Parameter may receive Left, Right and Center values \u200b\u200b(default Left for and center for ). Valign Vertical Alignment Parameter can take torus values \u200b\u200b(at the top edge), Bottom (at the bottom edge), Middle (in the middle), BaseLine (based on the baseline). Default - Middle. The baseline alignment ensures the text binding of a separate line in all cells to a single line. Set the leveling parameters at the code level Determines the alignment for all cells of this line, while in each individual cell cell of the string, their parameters that redefine the parameters specified in .

Let us give an example of a table in which the data in the cells of the first column is aligned to the right, the second column - in the center, and the third - left (default value):

Cell 1.	Cheating 2.	Cell 3.
Yachika 4.	Cell 5.	Cell 6.

The display of this example browser is shown in Fig. 4.11.




Fig. 4.11.Aligning data in table cells

The NOWRAP parameter disables the ability to automatically split the cell text to the string. Can be used in codes , and . An unjustified application of this parameter should be avoided, as it can significantly reduce the possibilities of dynamic change in tables and worsen their perception. In most cases, it is enough to apply nowrap for individual cells that really require the prohibition of word transfer to a new line. Word transfer is carried out only on separators between words (spaces), and in some cases, to prohibit text rupture in separate places, instead of a space symbol, set the nonbreaking space code. As examples, you can lead cases where the gap is not recommended - between the numeric value and the units of measurement of this value; Between the surname and initials. So, text 650 km or Yeltsin B.N. It is recommended to write in the form650 km and Yeltsin B.N.

Width and Height parameters can be used in codes and . Their syntax is similar to the syntax of these parameters for the tag

. Their value determines the width or height of the cell for which these parameters are recorded. Values \u200b\u200bcan be set in pixels or percentage of the entire table. Microsoft Internet Explorer permits to set the Width value only in pixels. Since the table is a connected structure consisting of rows and columns, the width task for any cell affects the width of the entire column, in which the cell is located, and the height task affects the entire line. If the width value is specified in the column only in one cell, then this value becomes the width of the entire column. If there are several such indications, then the maximum value is selected. The same properties are characteristic of lines.

For complex tables, the need is characterized by combining several adjacent cells horizontally or vertically in one. This feature is implemented using COLSPAN (COLIIMN SPANNING) and ROWPAN (ROW SPANNING) set in codes

Settings are set to individual columns of this group. At the same time in the tag If necessary, the alignment parameters could be specified, the values \u200b\u200bof which are distributed to all columns of this group. The values \u200b\u200bof the parameters specified in the tag , redefine values \u200b\u200bfrom the tag . Note that in the tag In this example, in contrast to the previous one, there is no SPAN parameter. Here it is meaningless, since the number of elements in the group will be determined by the following tag Tags . Therefore, any specified value of the parameter span tag Will be overridden.

In fig. 4.17 shows the result of the implementation of the above code, as well as the option of displaying such a table with a record of Rules \u003d Groups in Tag

or

. Recording form: colspan \u003d num, where Num is a numeric value defining how many columns should be extended to the current cell horizontally. The application of the Rowspan parameter is similar, only here specifies the number of strings that should capture the current vertical cell. By default, the value equal to one is set for these parameters. Permissible simultaneous setting of the values \u200b\u200bof both parameters for one cell. The correct setting of the values \u200b\u200bof these parameters may not be a very simple task, especially since most HTML editors can be visually constructed with subsequent generation of HTML codes only the simplest tables. In fig. 4.12 shows an example of displaying the table obtained by the following HTML code: Cell capturing two lines Cell, addictive two columns Cell 3. Cell 4. Cell 5. Cell 6. Cell 7. Fig. 4.12. Table with cells propagating several rows or columns The inattentive task of the values \u200b\u200bof the cell slip parameters can lead to their mutual overlap and conflicts, in which the result is unpredictable. The characteristic use of extended cells is a shared header for several adjacent columns or lines. We give an example of the HTML code (the display of which is shown in Fig. 4.13), in which the extended cells are incorrect. Cell 1. Cell 2. Cell 3. (Common Ha three lines) Yachika 4. Cell 5. Cell 6. Cell 7 (common on two columns) Fig. 4.13.The result of the incorrect definition of extended cells (text imposition) The BGColor parameter sets the color of the entire table, separate lines or cells. Can meet in tags , , No information is contained or one or more spaces that are not interpreted as data. Cells containing invisible data, for example, may contain code or row translation code , or any text whose color coincides with the color of the cell background. If cells containing data (even if invisible) are displayed all the browsers equally, then empty cells will be shown differently. The Netscape browser is not an empty cell, i.e. the place where this cell is located, will be painted with the color background of the page, and not the color of the cell background, in contrast to the cells containing the data. Around the empty cells do not draw a frame. An example of a table with an empty cell is shown in Fig. 4.15. Fig. 4.15. Empty table cell is displayed in different different browsers Microsoft Internet Explorer and those and other cells displays the color of the background of the cells. Such a browser as NSCA Mosaic provides the user to determine the nature of the issuance of empty table cells by selecting the appropriate options. Knowledge of such features will allow you to develop tables that will be displayed in a suitable way, regardless of the browser selected by the user. In some cases, it is enough to create cells containing the only code for this instead of some empty cells. Aligning data in table columns A characteristic problem when creating tables is to set the alignment parameters for individual rows or columns. To align the contents of all cells of the current line, it is enough to set the required parameters in the code . However, it is more often necessary to ensure the same alignment for all elements of one column, since in most cases there are homogeneous data in the column. In earlier versions of HTML, it was proposed to use the COLSPEC (Column Specification) parameter, which was set in Tag and . This feature is not provided for by the HTML specification, however, both Netscape and Microsoft Internet Explorer are supported. Recording form is the same as for the tag Namely: BGColor \u003d value where color content in the RGB format or its name is set as a value. Example: or . Nested tables Separate tables of tables may contain almost any language tags and data allowed in the section Document. Including, inside the table cells, another table can be placed entirely. Such tables are called nested. The rules for their construction do not differ from the construction of tables and do not need a separate description. We only note that not all browsers that support tables correctly reflect complex tables with several nesting levels, so their use requires caution. We give an example of a table that uses one nesting level. Cities of Leningrad region H - population of the city (th., 1992) P - distance from St. Petersburg (km) Cities subordinate to St. Petersburg City H. P. Wow 13.6 50 Kallpino. 144.6 26 Kronstadt 45.2 48 Lomonosov 42.0 40 Paved 25.4 30 Petrodvorets 83.8 29 Pushkin 95.1 24 Sestroretsk 34.9 35 All cities subordinate administration St. Petersburg, have straight gopodkay television numbers. Cities of Regional Submission City H. P. Boksitogorsk 21.6 Align \u003d Right\u003e 245 Ball 50.3 Align \u003d Right\u003e 122 BCEW 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 Align \u003d Right\u003e 159 Gatchina 80.9 46 Ivangorod. 11.9 Align \u003d Right\u003e 147 Kamennogorsk 5.9 157 Kingisepp 51.5 Align \u003d Right\u003e 138 Kirishi. 53.8 Align \u003d Right\u003e 115 Kirovsk 23.8 55 Lodeynoye Field 27.3 Align \u003d Right\u003e 244 Lyga 41.8 139 (Table continuation) City H. P. Lyuban 4.7 85 New Ladoga 11.2 Align \u003d Right\u003e 141 Otradnoye 22. 9 Align \u003d Right\u003e 40 Pikalevo 25.1 Align \u003d Right\u003e 246 Popping 23.1 285 Primorsk 6.7 137 Priozersk 20.5 Align \u003d Right\u003e 145 Svetogorsk 15.8 Align \u003d Right\u003e 201 Shale 42.6 Align \u003d Right\u003e 192 Pinery 57.6 81 Tikhvin 72.0 Align \u003d Right\u003e 200 Tosno 33.8 53 W Lamb 12.5 64 Fig. 4.14.An example of nested tables The result of the display of this example is shown in Fig. 4.14. At first glance it seems that in the example there is no nesting tables. In fact, the entire document is a table that does not have a framework and consisting of a header and only one string containing five cells. The organization of such a table serves the only purpose - the location of the data on the page. Inside the first cell there is another table having a heading and consisting of three columns, after which the text leveled in the middle. The third and fifth cells also contain individual tables. The second and fourth cells are empty, they do not contain any data and have the only Width parameter defining its width. Their appointment is to ask an indent between the first and third, as well as the third and fifth cells in which the tables are located. This is one of the possible options for the task of such an indent. Another option is to use the CellSpacing parameter that determines the distance between the cells, but this parameter sets the indentation simultaneously horizontally, and vertically, which is currently not required. In addition, an empty cell with a predetermined width when the viewing area is narrowed, unlike the space specified by the CellSpacing parameter (as well as CellPadding). Try on this example to reduce the width of the viewing area in the browser or, which will lead to that results, increase the size of the font that the text is displayed. The distance between the tables will be reduced to zero, giving the opportunity to see simultaneously all the information as long as possible, but the further change will not lead to a sparrel of the table, and will provide the possibility of horizontal scrolling. By a similar scheme, you can organize the placement of information consisting not only from tables, but also images, text fragments, etc. Features of building tables This section discusses some specific possibilities of individual browsers, as well as separate subtleties of building and displaying tables. Display empty cells in tables One of the features of the presentation of tables by various browsers is the display of empty cells. According to the description of the language, all browsers must complement the lines with empty cells if their number is set to smaller than in the rest of the lines. In addition, anywhere in the table can be cells that do not contain data. There is a difference between empty cells and cells containing invisible data. In empty cells inside a pair of tags and and determined the alignment and width of each table column. For example, the setting colspec \u003d "L40 R50 C80" defined for the three columns of the table alignment of data in the cells: for the first column - Left, for the second - Right and for the third - center, as well as the width of each column. As the HTML language is developed, it was refused to use this parameter, and now it is not included in the language specification and is not supported by most browsers. As a result, to solve such a task in Netscape Navigator, there are no special funds, and the only option remains either using the default alignment, or the task of the corresponding values \u200b\u200bin each cell where it is necessary. Microsoft Internet Explorer provides special tags - and . These tags should be placed immediately for the description. Before the first advent of the tag . Tag parameters and There can be SPAN, which determines the number of adjacent speakers to which the values \u200b\u200bof parameters and Align are applied, which determines the horizontal alignment of the data in all cells of the corresponding column (or columns). The permissible values \u200b\u200bof the ALIGN parameter are Left, Right and Center. For the SPAN parameter, the default value is one. Tag Additionally allows you to set the Valign parameter that determines the vertical alignment of the data in the cells. The values \u200b\u200bof the valign parameter are Middle, Top and Bottom. Difference between tags and It is that the first one of them is, in addition to the setting of data alignment parameters for columns, also performs a conditional combination of several columns to the group. The effect of such an association is manifested when using the Rules parameter, which is described below. By default, all columns are considered to be one group. Tag Must be used only to determine the alignment of data in separate columns in the group. Let us give an example. Let it be necessary to build a table containing 6 columns, and the data in the first three of them should be aligned to the right, and the following three - in the middle. To solve this task, this fragment of the HTML code should be written: (data for the table) The result of the display of this code is shown in Fig. 4.16. Fig. 4.16. Table with different parameters for aligning data in groups of cells Another example. Let in the previous table the first two columns should be aligned to the right, and the third - in the middle, and all three speakers must be combined into the group. Subsequent three columns should also be combined into a group and have an alignment similar to the first group. To solve this task, this fragment of the HTML code should be written: (data for the table) In this example after the tag

From which the meaning of unification in the group is visible.

Council

Since the scope of tag

and Restricted by the Six Microsoft Internet Explorer browser, then you should use with caution. The convenience of using these tags is obvious, but in practice, most tables are built using the corresponding align alignment parameter for each table cell, where it is necessary, which significantly increases the scope of the source code of the table, but provides the ability to view in any browser.




Fig. 4.17. Table with grouped columns

Tax frame color job

A few more parameters characteristic only for Microsoft Internet Explorer allow you to choose the color of the tables - Bordercolor, BordercolorLight and Border ColorDark. These parameters can be set in tags

, . As the value of these parameters, the name of the color or its hexadecimal value can be used. The BorderColor parameter defines the color of all the elements of the table framework, while the other two parameters set the color of the individual components, overriding the BorderColor value. The BorderColorLight parameter stains in the specified color left and upper edge of the entire table and, accordingly, the right and lower edges of each cell. The second parameter bordercolordark sets the colors of opposite edges. Due to the combination of these parameters, the table will look somewhat raised above the surface of the page or in-depth. It all depends on the selected color combination.

Note

The Netscape version 4.x browser also supports the BorderColor parameter.

Task background pattern for table

Microsoft Internet Explorer Browser (as well as the Netscape version 4.x browser) allows you to use the Background parameter, which defines the background pattern for the table as it can be done for the entire HTML document. This parameter can be set in tags

,	and

, , w.

Microsoft Internet Explorer browser allows you to use a number of new tags to structuring tables and flexible control of the drawing frame and mesh lines.

Tags

, and The table description structure is more strictly specified, highlighting the tables of the table header, the main content of the table and the final string. These tags can only appear in the description of the tables inside the pair of tags

and	. Tags Structuring Table

and.

Tags and Used to describe the top and bottom footers of the table. These tags can occur in the table no more than once. The final tag can be omitted for them. Using tag data is convenient when creating large tables that go beyond one page.

Tag may occur multiple times in the table description, and the use of the final tag is required. This tag performs a logical data grouping as well as the tag performing grouping adjacent columns.

When using new tags, it is possible to more flexibly control the frames and lines of the table grid.

Control of the drawing frame around the table is carried out by the Frame tag parameter

, And the lines of the table grid are the Rules parameter. For example, it becomes possible to spend only vertical lines between the speakers and instead of the frame around the entire table give horizontal lines from above and below the table.

The Frame parameter can take the following values:

• Box or Border. - Frame is drawn from all four sides
• ABove. - Only from the top
• BeLow. - Only from the bottom
• Hsides. - Draws the bottom and top side
• Vsides - the left and right side is drawn
• LHS. - only on the left side
• RHS - Only on the right side
• Void. - Table without an external framework

The RuLES parameter controls the drawing of the internal lines of the table grid and can take the following values:

• All. - all internal lines are drawn
• Groups. - Drawn only lines separating groups
• Rows - draw lines, separating strings
• Cols. - draws lines separating columns
• None - Internal lines are not drawn

Example:

.

Note

Drawing the table lines of the table and frames will be carried out only if there is a Border tag parameter

. In the absence of this parameter or its zero value of the grid line and the frame will be absent for any values \u200b\u200bof the Frame and Rules parameters.

We give an example of a complete HTML code creating a table using the described features:

Example of flexible lines
mesh table

Column header 1.	Column header 2.	Column header 3.
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Data	Data	Data
Outcome	Outcome	Outcome




Fig. 4.18.Flexible Drawing Lines Mesh Tables Browser Microsoft Internet Explorer

In this example, the display of which the browser is represented in Fig. 4.18, one of the possible options for controlling the grid lines and frames around the table. A frame of 5 pixels thickness is drawn around the table (Border \u003d S) only from the top and bottom side (Frame \u003d Hsides). Inside the table draws a grid lines separating data groups (Rules \u003d Groups). Data Groups are defined, firstly, the presence of three tags , each of which announces a separate column of the table group. Secondly, tags , and<тгоот> Also break the table data into groups, which determines the drawing of the internal horizontal lines.

Setting table column numbers

MICROSOFT Internet Explorer browser (as well as Netscape 4.x browser) permits to set in tag

The cols parameter, whose value determines the number of columns in the table. Recording this parameter allows you to speed up the table layout procedure when displaying in the browser, as it is possible to determine the number of columns until the table description code is downloaded. At the moment, the inclusion of this parameter does not affect the progress of the document loading.

Vertical equalization of tables

The last parameter of the tag

Inspectorate only Microsoft Internet Explorer, it is Valign, which defines the vertical alignment of the table relative to the text. Its action is similar to the same parameter for images.

Note

Note that the use of the same parameter can differ significantly in both its intended purpose and possible values \u200b\u200bfor different tags even for one browser and within the language specification. Therefore, it is impossible to compile a consolidated table using various parameters outside the context of their use. For example, the Align parameter only in tables is used in three different versions:

• for tag

The Align parameter may receive the LEFT or RIGHT values, and means the location of the table, pressed to the left or right edge, respectively;

for tag

,

The Align parameter takes the torque or bottom values, and means the layout of the table header over the table or under it;

for tagov

and

The Align parameter accepts the LEFT, RIGHT or CENTER values, and means aligning the contents of the corresponding cell (or cells) of the horizontal table. Alternative to a tabular representation The support of the tables has become a widely common property of web browsers, so that there are practically no reasons for which it should be avoided. Nevertheless, we consider possible options for alternative data presentation that you can use instead of tables or add to them. Some other methods that do not use the concept of tables: Using the simulated text. This method has traditionally been used in earlier versions of the HTML language when the table support has not yet existed. Its use and so far has not lost relevance, as such texts will be properly displayed by any browsers, including purely text. Using an image containing a table. The table can be created by any text editor or even displayed by the Web browser and then saved as a picture in one of the graphic formats. This is not the best option, since the entire flexibility of the dynamic setup of table display is lost. In addition, it is necessary to store an additional file with an image, the size of which, besides, as a rule, will be much larger than the size of the text describing the HTML table. Possible area of \u200b\u200bapplication - tables of strictly defined dimensions for which the dependence of its display from any external factors (fonts, browser operation modes, etc.) is invalid. Using lists instead of tables. For the simplest cases, instead of organizing tables, it is quite possible to do with one of the types of lists available in the HTML language. Table preparation To prepare HTML tables, any editors can be used, most of which have means for visual creating tables. Let us give an example of the table preparation in the HotDog Professional Editor. To create a table, it is enough to select Tables from the insert menu, after which the dialog box shown in Figure will be issued. 4.19. Creating a table consists in filling the corresponding fields in the window. After determining the number of rows and columns in the table, you can proceed to directly filling out individual table cells, which will be shown in the same dialog box. The preview dialog box, pressing which allows you to view the resulting table using a built-in browser (Fig. 4.20). Fig. 4.19. Dialog box for creating tables Fig. 4.20. Table shown by built-in browser After the data preparation is completed for the table, click OK. Then the generated table description code will be inserted into the editable HTML document. For example, shown in Fig. 4.19, the following code will be generated: (part of the code omitted) 3Allo Table CTLBE 1. Column 2. CTOs 3. Column 4. 1 2 3 4 Similarly, this task is solved when using the Netscape Composer component of Netscape Communicator. In fig. 4.21 shows a dialog box in which it is necessary to fill the required fields. To enter additional tag parameters The Extra HTML button provides. After filling in the fields of the dialog box, press the Apply button and then the ability to fill the table cells (Fig. 4.22). Fig. 4.21. Dialog box for setting the Netscape Composer table settings Fig. 4.22. The initial position of the input cursor in the empty table There is a body table. The body consists of rows and columns. The table is filled in line. Each tag Creates a new string. Next in nested Columns are created. You can create a lot of columns. In this case, you need to monitor the number of columns in each row. For example, if there were 5 columns in the first line, then in the following lines there should be 5 columns. Otherwise, the table sails. It is possible to combine cells. How to make a table in html Let us give an example, HTML code: Sample table Column 1. Column 2. Pay attention to the cell . We use the COLSPAN special attribute to combine the horizontal cells. Its numerical value indicates the number of columns united by. There is also an analogue of this attribute: tag (Table header), where you also need to register colspan. The result will be the same. But often use the usual TD. Now consider in detail all the tag attributes . Attributes and tag properties To the opening tag You can prescribe various attributes. 1. Align \u003d "Parameter" property - sets the table alignment. Can take the following values: In the disassembled example, we aligned the table in the center of Align \u003d "Center". This attribute can be applied not only to the table, but also to individual tables of the table. . Thus, in different cells, the alignment will be different. for example , , , or cOLS - Line is displayed between columns none - all borders are hidden rows - the boundary is drawn between the rows of the table created through the tag 12. Width \u003d "Number" property - sets the width of the table: either in pixels or percentage. 13. Class property \u003d "Class name" - you can specify the name of the class to which the table belongs. 14. Style property \u003d "styles" - styles can be set individually for each table. Now it's time to immerse yourself in the table and consider the attributes of the table cells. These attributes need to write in the discovery tag and The same parameters are available as for will be hierarchically applied to all or strings ... ... ... 2. The property background \u003d "URL" - sets the background drawing. Instead of the URL, the address of the background image should be written. Example Sample table Column 1. Column 2. Converted to the page Next: In the examined example, our background image is located in the IMG folder (which is in the same directory as the HTML page), and the image is called FON.gif. Please note that in the tag we added style \u003d "Color: White;" . Since the background is almost black, so that the text does not merge with the background, we made text white. 3. Property BGColor \u003d "Color" - Sets the color background of the table. As a color, you can choose any of the entire palette (see codes and titles HTML colors) 4. Border \u003d "Number" property - sets the thickness of the table frame. In previous examples, we pointed to Border \u003d "1", which means the thickness of the frame - 1 pixel. 5. BorderColor \u003d "color" property - sets the color of the frame. If Border \u003d "0", the framework will not and the color of the frame will not make sense. 6. CellPadding property \u003d "Number" - indentation from the frame to the contents of the cell in pixels. 7. CellSpacing property \u003d "Number" - distance between cells in pixels. 8. The property cols \u003d "number" is the number of columns. If you do not specify it, the browser itself will determine the number of columns. The only difference is that the specification of this parameter is likely to speed up the table download. 9. Property Frame \u003d "Parameter" - how to display borders around the table. Can take the following values: void - Do not draw borders border - Border Around Table aBOVE - Border on the top edge of the table below - border from the bottom of the table hsides - add only horizontal boundaries (top and bottom of the table) vsides - Draw only vertical borders (left and right from the table) rHS - border only on the right side of the table lHS - border only on the left side of the table 10. HEIGHT \u003d "Number" property - sets the height of the table: either in pixels or in percent. 11. The property is Rules \u003d "Parameter" - where to display boundaries between the cells. Can take the following values: all - line draws around each cell table groups - The line is displayed between groups that are formed by tags. . Attributes and properties 1. The property Align \u003d "Parameter" - sets the alignment of a separate table cell. Can take the following values: left - Leveling to the left edge center - center alignment right - Alignment on the right edge 2. The Background \u003d "URL" property - sets the cell background image. Instead of the URL, the address of the background image should be written. 3. BGColor \u003d "color" property - sets the color of the cell background. 4. BorderColor \u003d "color" property - sets the color of the cell frame. 5. CHAR \u003d "letter" property - sets the letter from which you need to do alignment. The Align attribute value must be installed as char. 6. The colspan \u003d "number" property - sets the number of combined horizontal cells. 7. HEIGHT \u003d "Number" property - sets the height of the table: either in pixels or percentage%. 8. Width \u003d "Number" property - sets the width of the table: either in pixels or percentage%. 9. The Rowspan \u003d "Number" property - sets the number of vertical cells united. 10. Property Valign \u003d "Parameter" - Align the contents of the cell vertically. tOP - Align the contents of the cell on the top edge of the line middle - alignment in the middle bottom - Alignment at the bottom edge baseline - Baseline Alignment Note 1. For tag . Parameters for one tag within it How to make the boundaries of the cells in the table not glued In the case of using Border (the border of cells) and zero indents between the cells, they still glue and it turns out a double border. To avoid it, you need to register in the styles Table Border-Collapse: Collapse: ... Dear reader, now you have learned much more about HTML TABLE tag. Now I advise you to go to the next lesson. Using the colspan attributes, Rowspan you can combine several adjacent column cells or strings into one large cell. Attribute Colspan TEV and . Text placed between tags , does not inherit this style, since the tag nor tag . Horizontal text alignment in a specific table column can be changed by specifying style text-Align. For pseudoclassa tD: NTH-Child (N) where N is the column number. However, this method will not work if an attribute is present among the tables of the table cOLSPAN.. Example , Allows you to merge the cells of several columns within the same line. Rowspan attribute - cells from several lines within one column. The number specified in these attributes indicates the number of cells that will be fused. Because When performing mergers operations it is very easy to get confused, I strongly recommend making a preliminary sketch of the table on paper. Example: and The easiest way to understand how you can use the grouping of rows and columns on the example of the Sudoku table. The COL tag sets the parameters separately for each column. It does not matter how to write in the source code: or Example HTML code: 1111 22222 33333 44444 55555 66666 77777 88888 99999 Display in the browser: 1111 22222 33333 44444 55555 66666 77777 88888 99999 Improving the appearance of the HTML page table The CellSpacing attribute makes it possible to set the size of the strip of pure space framing the table from the outside. By default, the browser shares the table cells of the band in 2 pixels. The CellPadding attribute sets the size of the pure space bands inside the cell, separating its contents from external boundaries. By default, this value is 1 pixel. To make graphic images placed in neighboring table cells, it looked like a single whole, you need to set CellSpacing attributes, CellPadding zero values. Displaying HTML Page Table Borders If the value of the Border Tag attribute It is different from zero, the browser concludes a table into the frame and distinguishes the neighboring rows and columns of the table. Using the Frame attributes, Rules can specify which parts of the table frameds should be shown. The Frame attribute is used to determine the fragments of the external outlines of the table. Rules attribute - indicates a set of internal separation lines. Below are the permissible values \u200b\u200bof these attributes. Frame Value Void Result All Lines Above Line Above Table Below Line Under RHS Table Line On Right From Table LHS Line Left Table Line above and Under Table Vsides Lines on the left and right From Table Border All lines are present (default) Rules none All lines There are no cols lines between the Rows line columns between the groups of the groups line between groups of columns and rows all all lines are present (by default) Example: HTML code: 111 111 111 111 111 111 Display in the browser: 111 111 111 111 111 111 Word Transfer in HTML Page Cells By default, the browser makes the automatic transfer of text words inside the table cell. The nowrap attribute is forcibly disables the word transfer function within the table and displays the text to one line. Therefore, this attribute is recommended to be applied with respect to table cells containing short text, because Otherwise, it will go beyond the browser window. It should be said that this attribute does not affect the cell text formatted by tags , . Nested HTML Page Tables Attaching tables one to another is a very common application of the appearance of the WEB page. First of all, it is necessary to build a main table, and then in its cells to place subsidiaries. Defining the table, you must not forget to include in their description all closing tags containing a slash symbol, because The skipping of just one such descriptor will distort the table dramatically. Should not, also, abuse attachment, because In this case, the browser page load is significantly slowed down. Formatting invested tables is carried out according to the general rules, which, in fact, makes the page attractive. Example: . The closing tag is obligatory. Attention: Without using all these tags, the table is not possible. Now let's try to use the theory and create a table in practice. The task: Create a table from one row, where there will be three columns. HTML code: 111 111 01 01 01 01 111 111 111 Display in the browser: 111 111 01 01 01 01 111 111 111 09.11.2015 Hello everyone! We continue to study the foundations of HTML. In this lesson, I will tell and show on the examples, how to make a table in html. And also consider how you can set the color of the table cells, how to center the table, learn how to make the border of the table, etc. HTML tables are often used in HTML to enumerate some information. Previously, the tables were used to create a framework of web pages: ... But this is already in the past, as today there are more efficient ways to create frameworks for the site with. I often use a table on my blog or on the site, for example, as in. I think you figured out what to learn to create a table. What major tags consist of a table? ○ Tag Table This is the main container to create a table, inside of which other table elements are contained, such as columns and rows. The closing tag is mandatory. ○ Tag T.R. Inside container …… placed rows: Columns are created using a tag series -1 / Column 1 column 2. column 3. The task: Create a table of three rows and three columns. series -1 / Column 1 column 2. column 3. series -2 / Column 1 column 2. column 3. row -3 / Column 1 column 2. column 3. Until that moment you are all clear? Who did not understand, raise your hand! Yeah, understood everything, then we go further. Now consider attributes for the table. * Attributes ○ Table borders in HTML To be visible table to tag applied attribute "border.» . If the attribute value « border.» "0", the borders will not be visible, if not to register to the tag attribute Border , the border in the table will not be visible too. series -1 / Column 1 column 2. column 3. Result: Try to change the value in the attribute Border on the "10" . ○ How to combine cells in the table To merge cells in the table use attributes "COLSPAN" and "Rowspan" to the tag < tD.> . colspan - combining cells horizontally; rowspan - Association of vertical cells. In the values \u200b\u200bindicate how much the cells need to merge. row 1 Column 1 series 2 Stage 1 series 2 Stage 2 Result: row 1 Column 1 row 1 Stage 2 series 2 Stage 1 Result: More complex example: series -1 / Column 1 column 2. column 3. series -2 / Column 1 column 2. column 3. column 4. Result: ○ How to increase the distance between the tables of the table To increase the distance between the text and the border of the cell, prescribe an attribute "CellPadding" To tag In the values \u200b\u200bof the attribute "CellPadding" indicate the distance of the decendment row 1 Column 1 column 2. Result: To zoom in the distance between the cells in the table, use the attribute "CellSpacing" To tag In the values \u200b\u200bof the attribute "CellSpacing" Specify the distance between the cells row 1 Column 1 column 2. Result: ○ How to make html table background To make the background of the HTML table use to the tag and such attributes: BgColor - the background color of the entire table or each cell separately. Color is set by code or word. Background -phone in the table is filled with a pattern. series -1 / Column 1 column 2. column 3. series -2 / Column 1 column 2. column 3. column 4. Result: ○ How to insert a picture in the HTML table To insert a picture in the HTML table, between the tag Insert tag . row 1 cell 1 cell 2. Result: Values \u200b\u200bare set in pixels (PX) or percent (%) ○ Align the content in the HTML table To align the contents in the HTML table, use to tag attribute "Align" and "Valign" : Align. - Horizontal content alignment in the table. Values: left. - press the content to the left side (default); center – install in the center; right - press the content to the right part Valign. - Vertical alignment of content in the table. Values: top. – press the content to the top; bottom – press the content to the bottom; middle – set the content in the middle text cell by default content align horizontally along the right edge, vertically press to the bottom the contents align horizontally along the left edge, vertically - press to the top content align horizontally in the center, vertically press in the middle Result: ○ How to align the HTML table in the center To align the table in the center, you need to grab the table tag : Table code series -1 / Column 1 column 2. column 3. Additional and main tags to the table Table for website Name 1. Name 2. 1 2 Result: So finished with tables. You can now create a table of any complexity. Secure this lesson. Try to create any table yourself. Waiting for you in the next lesson. Subscribe to update my blog. Previous post Next post Table with frames Name Surname Larisa Isaeva Dmitriy Kolesnikov RESULT: Table without frames Table with frames Attributes tagov and For merge cells Example ferrets weight the size males 1.2 - 2.5 kg up to 70cm females 0.7 - 1.0 kg up to 40cm RESULT: ferrets weight the size males 1.2 - 2.5 kg up to 70cm females 0.7 - 1.0 kg up to 40cm According to the HTML5 standard, all previously used table attributes, such as border., cellSpacing., cellPadding. et al. no longer supported and their use of the validator considers errors in the code. To make tables, you need to use CSS-styles, with which you can replace all outdated table attributes. For example, instead of an attribute cellSpacing. To change the distance between the table cells, the property is used. border Spacing., and to align the contents in the cells of the table - properties text-Align. and vertical-Aling.. CSS-styles for tables Tags grouping strings HTML table To create more complex tables, you can use tags: Example Beer consumption FULL NAME. lithrov TOTAL 250 Ivanov Ivan Ivanovich 133 Petrov Petr Petrovich 117 RESULT: Tags grouping columns HTML tables Tag attribute yellow red RESULT: Do not try to set the style text-Align. for tagov ... not a descendant neither tag Name Price, rub.) Per-minute payment of solarium (from 4 minutes) 15 50 minutes of Solarium (14 rubles / min, 1 month) 700 100 minutes solarium (13 rubles / min, 2 months) 1300 200 minutes of Solarium (12 rubles / min, 3 months) 2400 RESULT: However, this method will not work if an attribute is present among the tables of the table cOLSPAN.. Did not find an answer to your question? Look at here Global Attributes Attributes forms HTML5 Introduction to JSON What the JSON TXT file Regular Expressions (Regexp Object) Form Check Regular JavaScript Expressions Examples