Tables and frames
To clearly separate the contents of one cell from the other cells are added to the border. For their establishment meets the parameter <TABLE> tag border, which determines the thickness of the border.
Example 1 shows how to create a border around the cells.
Example 1: Adding a frame to the table
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> The thickness of the border </ title>
</ Head>
<Body>
<Table width = "200" cellpadding = "5" border = "2">
<Tr>
<Td> Cheburashka </ td>
<Td> Crocodile Gena </ td>
<Td> Shapoklyak </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
The framework thus created differ slightly in appearance in different browsers.
| Internet Explorer | Firefox | Opera |
 |
 |
 |
Fig. 1. Frame obtained by using the border
To get a frame of one species is recommended to use the border style attributes, applying it to the cells of the table (tag <TD> or <TH>). However, here we await the pitfalls. Since the frame is created for each cell, the cells obtained contact areas of double thickness border. To solve the above features, there are several ways. The easiest - use the border-collapse property with a value of collapse. Its task is to monitor contact line, and instead of the double border to represent a single. This attribute is enough to add to the tag <TABLE>, and then he will do everything yourself (Example 2).
Example 2. Application of border-collapse to create a framework of the table
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Creating a framework </ title>
<Style type = "text / css">
TABLE {
border-collapse: collapse; / * The line between the cells is displayed as one * /
}
TD {
border: 2px solid green; / * Parameters frame around the cells of the table * /
text-align: center; / * Aligns the text to the center * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
The difference between the boundaries of the table when you add a parameter border-collapse, and without it is shown in Fig. 2.
a
b
Fig. 2. View the table by using the attribute border-collapase
Fig. 2a shows the frame of the table that is used by default. Note that in the table all the lines have twice the thickness. Adding parameter border-collapse removes this feature, and the thickness of the lines becomes the same (Fig. 2b).
To create lines of the same type within a table, you can go the other way. It should be added to the selector <TD> border, but to cancel the line to the right and below, specifying the corresponding attribute value none. Then at their boundaries engages cells will not overlap with each other because only one line will be. However, the method of forming the boundaries no bottom and right lines in the table itself. Added parameter border-right and border-bottom to the selector <TABLE>, will end up with the right frame (Example 3). For uniformity of care should be taken to the style, thickness and color of the border in all cases the same.
Example 3: Creating a frame from the table using the attribute border
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Creating a framework </ title>
<Style type = "text / css">
TABLE {
border-right: 2px solid green; / * Border from the table to the right * /
border-bottom: 2px solid green; / * Border at the bottom of the table * /
}
TD {
border: 2px solid green; / * Parameters frame around the cells of the table * /
border-right: none; / * Remove the line to the right * /
border-bottom: none; / * Remove the bottom line * /
text-align: center; / * Aligns the text to the center of the cell * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
In variations of this method it is possible, for example, the selector <TD> add just the right border and bottom, and at <TABLE>, conversely, to add border attribute, but the line to the right and bottom removed. In any case, the result will be represented by one.
Simple and original look of the table can be obtained if the boundaries of color to make a matching background color. But the lines were visible, be sure to make the background fill in the tag <TD> or <TABLE>. Then the table cells are obtained, if dissected cutter together (Example 4).
Example 4. Use invisible boundaries in table
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Creating boundaries </ title>
<Style type = "text / css">
BODY {
background: white; / * The background color of the web page * /
}
TABLE {
border-collapse: collapse; / * The line between the cells is displayed as one * /
}
TD {
border: 2px solid white; / * Parameters frame around the cells of the table * /
background: #ccc; / * The background color of the cell * /
text-align: center; / * Aligns the text to the center * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
In this example, the background color of a web page is entered through the background property added to the selector BODY. Although white is the default, it is sometimes desirable to specify that the user does not have a background color through browser settings. The same color should be at the table lines, in this case, they clearly are not issued and only share the cell.
The result is shown in Example 4 below.
Fig. 3. Type of boundaries that coincide with the background color
© 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.