Indents in CSS table cells. Retreat from the topic or how to remove indents on the edges of the page
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.
or strings
. Thus, in different cells, the alignment will be different.
for example
...
...
...
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. , , ,
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
.
Attributes and properties
and
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
The same parameters are available as for
. Parameters for one tag
will be hierarchically applied to all
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.
CSS allows you to install not only the style of the border of the table, but also the style of the boundaries of individual cells. Since each cell has its borders, then between neighboring cells, the border is obtained dual. But there is an opportunity to combine the boundaries of neighboring cells in one. For this, there is a Border COLLAPSE property. It takes values:
border-Collapse: Separate - each cell has its own border (default)
border-Collapse: Collapse - Total Border
border Collapse: Inherit - the value is taken from the parent element
For example, create a table and set the frame of the cells of all the tables that will be on the page. At first, we will not change anything to see how the table will look: