table header
With a large number of tables on the page, each one convenient set the title that contains the table name and a description. For this purpose there is a special HTML tag <CAPTION>, which sets the text and its position relative to the table. The easiest way to place the text in the middle of the table top or the bottom of it, in other cases, different browsers interpret the tag parameters <CAPTION>, which is why the result is uneven. By default, the title is placed on top of the center of the table, its width does not exceed the width of the table and in case it is automatically transferred to the new line of the long text. To change the position title in the tag <CAPTION> there align parameter, which can take the following values.
left - aligns the header on the left edge of the table. Firefox is a text on the side of the table, Internet Explorer and Opera a headline on top, aligning it to the left.
right - in Internet Explorer and Opera has a header from the top of the table and aligns it to the right edge of the table. Firefox displays a header from the right side of the table.
center - the title is located on top of the table at its center. This location is specified in the default browser.
top - the result is similar to the action parameter center, but unlike it is included in the specification of HTML 4 and is understood by all browsers.
bottom - the title is placed at the bottom of the table at its center.
As can be seen from the description, get a universal code, the same works in different browsers, in the case of the header layout on the right or left, it is problematic enough. In this case, we come to the aid styles and in particular attribute text-align. Its mission - to make the text aligned to the desired edge. Example 1 shows how to set the title on top of the table and align its right edge. Note that the tag <CAPTION> is inside the container <TABLE>, it is the default location.
Example 1. Create a table header with a tag <CAPTION>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Title of the table </ title>
<Style type = "text / css">
TABLE {
margin: 0 auto; / * Aligns the table in the middle * /
}
CAPTION {
text-align: right; / * Align right * /
font-style: italic; / * Italic text * /
}
</ Style>
</ Head>
<Body>
<Table width = "80%" border = "1" cellpadding = "4" cellspacing = "0">
<caption> Change resource extraction data </ caption>
<Tr>
<Th> & nbsp; </ th> <th> 2003 </ th> <th> 2004 </ th> <th> 2005 </ th>
</ Tr>
<Tr>
<Td> Oil </ td> <td> 43 </ td> <td> 51 </ td> <td> 79 </ td>
</ Tr>
<Tr>
<Td> Gold </ td> <td> 29 </ td> <td> 34 </ td> <td> 48 </ td>
</ Tr>
<Tr>
<Td> tree </ td> <td> 38 </ td> <td> 57 </ td> <td> 36 </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
The following is an example of the result (Fig. 1). Note that the title is not strictly aligned to the right edge of the table, since it, as well as on the contents of the cells acts setting cellpadding. One can imagine that the title is another cell of the table, which is subject to the characteristics of cellpadding and cellspacing.
Fig. 1. View the table header in the Opera browser
Ease of use tag <CAPTION> is that the title created with it is attached to the table and does not go beyond the scope of the conditional, limited by its width. However, the same result can be achieved by using styles, as shown below in Example 2.
Example 2: Create a table header with styles
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Title of the table </ title>
<Style type = "text / css">
TABLE {
margin: 0 auto; / * Aligns the table in the middle * /
}
.caption {
margin: 0 to 15%; / * Padding on the top and side of the text * /
padding-bottom: 4px; / * The field below the text * /
text-align: right; / * Align right * /
font-style: italic; / * Italic text * /
}
</ Style>
</ Head>
<Body>
<p class = "caption"> Change resource extraction data </ p>
<Table width = "70%" border = "1" cellpadding = "4" cellspacing = "0">
<Tr> <td> ... </ td> </ tr>
</ Table>
</ Body>
</ Html>
This example creates a new class named caption, which is applied to the paragraph (tag <P>). In this case, the table is aligned to the center of the web page, so the same should happen with paragraph. For this purpose, add padding to the left and right through the setting margin. Wherein a width clearly indicate, it is obtained by subtracting the total width of the window (100%) twice the indentation left (in this example 15%). Thus it turns out that the width of the text block coincides with the width of the table. In the case of use as a unit pixel, it is recommended to use the tag <CAPTION>.
© Policy Copyright www.htmlbook.ru
Comments
Commenting, keep in mind that the content and the tone of your messages can hurt the feelings of real people, show respect and tolerance to his interlocutors, even if you do not share their opinion, your behavior in terms of freedom of speech and anonymity offered by the Internet, is changing not only virtual, but real world. All comments are hidden from the index, spam control.