So, we have studied with you the most simple steps, which can be done with table boundaries. And now the table looks much more aesthetically pleasing. However, the filling of the cells directly rests on the boundaries. This can be easily fixed by just indenting the cells in the HTML table. And then the text inside the frame, in the cell, will be more readable.
To indent a cell, use the attribute cellpadding for tag
. However, there is another, more preferable option: CSS.
In this case, the indentation is set using the property padding. With its help, it will not be difficult to indent where necessary, that is, at the top, right, bottom or left, using, respectively, one of these properties: padding-top, padding-right, padding-bottom And padding-left.
You can specify exactly how many pixels the indentation should be. Let's give an example in which the bottom indent will be 20
pixels, and all the rest will be 10
. Such CSS-the code will look like this:
Td ( padding: 10px; padding-bottom: 20px; )
And the complete style code at this stage:
Table ( border: solid 1px blue; border-collapse: collapse; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; )
Result in browser:
Spaces between cells
As a rule, problems associated with creating tables can be solved by using tags, attributes and properties that allow you to create frames, indents in cells, and also set the color background of the cells themselves.
Indents in tables are not only found inside cells. They may also be present between the cells themselves.
There are two options for making indents between cells:
- using attribute cellspacing for tag
.
- using CSS-properties border-spacing.
It must be emphasized that border-spacing is specified for the table as a whole, while the property padding is written directly for cells.
Let's look at an example:
Table ( border: solid 1px blue; border-collapse: separate; border-spacing: 5px; ) td ( border: solid 1px blue; padding: 10px; padding-bottom: 20px; )
And the resulting result:
Let us immediately stipulate that you should not try to make such indentations using border-collapse: collapse. After all, when using this option, the cells “stick” to each other.
And to keep them separate from each other, you should use border-collapse: separate. It is important to understand that this value is the default value. And it is used only to clearly show how this problem is solved. If we delete this line, the result in the form of cells located separately from each other will be saved.
A table is one of the main tools for creating web pages.
Without using CSS, only with the help of tables can you create pages with complex designs. If you have completed the series of lessons Making a website - the first steps, then you understand what we are talking about.
Any table is a set of rows and columns, at the intersection of which there are cells. For example:
Let's look at our table from an HTML perspective:
- the table itself is specified using tags
,
- the table has a name - tags
,
- the table consists of rows - tags
|
, - each row consists of columns - tags
|
, - columns have names located in the first row - tags
|
.
Let's create a table where we indicate the intersection of row and column numbers as the content: Result:
As you can see, it didn’t turn out very nicely, we’ll decorate it.
HTML table parameters: indentation, width, background color, frame
For this purpose the tag
There are a number of parameters:- width- sets the width of the table (in pixels or % of the screen width),
- bgcolor- sets the background color of table cells,
- background- fills the table background with a pattern,
- border- sets a border of the specified width (in pixels) around the entire table,
- cellpadding- sets the padding in pixels between the cell border and its contents.
Let's apply these parameters: Result:
This is better, but our table is pressed to the left edge of the window, as is the text in it. Let's fix this by adding three more parameters:
- align- sets the table alignment: left (right), right (left), center (center),
- cellspacing- sets the distance between table cells (in pixels),
- cellpadding- sets the distance between the text and the inner border of the table cell (in pixels).
Let's apply these parameters: Result:
Please note that the table has double borders. If you specify cellspacing="0", then the boundaries will take the usual form:
Result:
In general, two parameters are responsible for boundaries:
- frame- sets the type of frame around the table and can take the following values:
- void- no frame,
- above- only the top frame,
- below- bottom frame only,
- hsides- only the top and bottom frames,
- vsides- only left and right frames,
- lhs- left frame only,
- rhs- right frame only,
- box- all four parts of the frame.
- rules- sets the type of internal table boundaries and can take the following values:
- none- there are no borders between cells,
- groups- boundaries only between groups of rows and groups of columns (will be discussed a little later),
- rows- borders only between lines,
- cols- boundaries are only between columns,
- all- display all borders.
Using these parameters, you can set the boundaries the way you want. Here we will give only one example, experiment with them all yourself. Result:
It should be noted that the boundaries in different browsers are displayed slightly differently.
HTML tags tr and td
Tables are formed row by row. Therefore, the parameters specified in the line (tr) extend their effect to all cells (td) of the line. Strings can have three parameters:
- align- aligns text in cells horizontally, can take values: left (right), right (left), center (center),
- valign- aligns text in cells vertically, can take values: up (top), down (bottom), centered (middle),
- bgcolor- sets the color of the line.
Let's look at an example: - width- sets the column width (in pixels or as a percentage, where 100% is the table width),
- height- sets the height of the cell, and all cells in the same row will become of this height.
For example, let's add to our code, in the tags
these parameters | | 1
|
2
|
3
|
|---|
Result:
It should be noted that if you do not set the width and height, the table will be formed according to the content (this was the case in the previous examples).
This lesson is over, practice creating and designing tables, you will need these skills in the next lesson, where we will create tables of complex structures.
CSS allows you to set not only the style of the table border, but also the style of the borders of individual cells. Since each cell has its own borders, the border between adjacent cells is double. But it is possible to combine the boundaries of neighboring cells into one. There is a border-collapse property for this. It takes values:
border-collapse: separate - each cell has its own border (default)
border-collapse: collapse - shared border
border-collapse: inherit - the value is taken from the parent element
For example, let's create a table and set a frame for the cells of all tables that will be on the page. Let's not change anything at first to see how the table will look:
Style:
1
2
3
4
5
6
|
Page
Homework.
In this lesson, I will not describe everything in detail either - only general points. For completeness, look at the example result.
- Create three tables, each consisting of one row and three columns (columns).
- In the first table, place the Header or “header” of the page (not to be confused with the “header” of the HTML document), in the second - the left and right menus, as well as the main content (content), in the third - the Footer or “footer” of the page.
- Let the width of the first and last column of each table be fixed.
- Important. Use tag
![]() only to create four horizontal menu buttons in the page header. In other cases, let the images go in the background, and in the second cells of the tables only colors are used, and in the first and last table it is #99FF99.
- Let the page content text be aligned on both sides of the table cell and the title centered.
- As for the distances between table cells, as well as cell indents, think for yourself where they should be completely removed and where they should be increased.
It became popular, web designers mainly used the table layout method and got very good results.
Tags used to build a table in htmltable - required tag, opening and closing the table
caption- optional tag indicating the table title
th- an optional tag, the opening and closing tags of which contain the column name. Typically appears bold
tr- a required tag that opens and closes the line
td- a required tag indicating the opening and closing of a cell in a row
Example code for a simple table
HTML table
Table name
Stobets 1
|
Stobets 2
|
Text in first cell
|
Text in second cell
|
The browser will display
Purpose of tables in htmlThe lesson on tables is very important! Thanks to tables, you can arrange not only text, but also images, links and much more. In the table you can specify background(or its color), indentation, width, border And other parameters that will give her a beautiful appearance. Table - Your first step to understanding web design! Previously, many sites were entirely laid out as tables, that is, everything that the user saw (side menu, top menu, content) was the content of the cells of a large table.
On that note, let's move directly to the attributes that make the table beautiful... Properties and parameters of html tables: indentation, width, background color, border (frame)U table tag there are the following attributes: width- table width. can be in pixels or % of screen width.
bgcolor- background color of table cells
background- fills the table background with a pattern
border- frame and borders in the table. Thickness is indicated in pixels
cellpadding- padding in pixels between the cell contents and its internal border
As before, we write the attribute value in quotes.
Let's look at the use of these attributes using an example. To do this, let's create a table (but already without the extremely rarely used caption and th tags) and set the parameter to the attribute border, width (width of table, row or cell) And bgcolor (cell color)
HTML table
Stobets 1
|
Stobets 2
|
|
|
As a result, the following table will be displayed in the browser:
frame- an attribute indicating the frame around the table. There are the following values: Void - no frame,
above - only the top frame,
below - bottom frame only,
hsides - only the top and bottom frames,
vsides - only left and right frames,
lhs - left frame only,
rhs - right frame only,
box - all four parts of the frame. rules- an attribute indicating the boundaries within the table, between cells. There are the following values: None - there are no borders between cells,
groups - boundaries only between groups of rows and groups of columns (will be discussed a little later),
rows - boundaries between rows only,
cols - boundaries only between columns,
all - display all borders. Let's look at the code example
HTML table
Stobets 1
|
Stobets 2
|
Text in the first cell of the first column
|
Text in the second cell of the second column
|
Result 
Now let's try to create a beautiful table. To do this, let's start using table alignment. To do this, there are the following already familiar parameters: align- table alignment. It can be placed on the left (left), on the right (right), in the center (center)
cellspacing- distance between table cells. Specified in pixels (default 0 pixels)
cellpadding- padding in pixels between the cell contents and its internal border (default 0 pixels)
Let's look at an example
HTML table
Stobets 1
|
Stobets 2
|
Text in the first cell of the first column
|
Text in the second cell of the second column
|
The browser will display a centered table that looks like this: 
tr rows and td cells in HTML tablesLet me remind you again that tables are formed row by row (tr). The rows (tr) already contain cells (td). If you specify a parameter for a string (tr), it will be valid for all cells(td) in this line, if for a specific cell, then only for it. In the examples above, I specified the color for the row; this parameter was distributed accordingly to all cells.
Stobets 1
|
Stobets 2
|
For tr and td tags there are the followingalign- alignment of text inside a cell. Left edge (left), right edge (right), center (center)
valign- vertical alignment of text inside a cell. Up (top), down (bottom), center (middle)
bgcolor- sets the color of the line
width- column width (all cells below will accept this parameter) is indicated in pixels or as a percentage, where 100% is the width of the entire table
height- cell height (all cells in the row will accept this parameter) Let's look at the code where the contents of the cells (td) are aligned along different edges: in the first one to the left, in the second to the right:
HTML table
Stobets 1
|
Stobets 2
|
Text in the first cell of the first column
|
Text in the second cell of the second column
|
Result
 Using tables you can create a very good page. Don’t forget that you can insert not only text into cells, but also images, links, etc.!) Thank you for your attention! I hope the material was useful!
|
