Hello dear blog readers! Often on web pages, in addition to text and pictures, it becomes necessary to display various data in the form of tables. This is understandable, a table is the most convenient way to present a large amount of information. Therefore, the question arises "How do you insert tables into html?"... In this article I will answer you this question and give you many examples of different html tables.
How to create a table using HTML
HTML tables are created in four steps.
1. In the first step in the html-code using the pair tag
tell the browser that a table has been inserted into the web page: ... The table element is a block-level element of a web page. Therefore, the table is always displayed on a new line, indented vertically from the adjacent elements, so there is no need to place it in a paragraph.
2. At the second step, we form strings tables by placing paired tags
inside ... Each element creates a separate line:
3. Further, in the third step, we form cell tables using paired tags
and |
that fit inside the element |
... Tag | creates the usual cell, and | cell heading, i.e. the header of the corresponding column:
4. Well, at the last step, we place inside the elements | and |
the contents of the cells. The HTML code for inserting a table into a web page looks something like this:
Column 1 | Column 2 | Column 3 |
|---|
Cell 1-1 | Cell 1-2 | Cell 1-3 |
Cell 2-1 | Cell 2-2 | Cell 2-3 |
More fine-tuning the display of borders will help. With, you can change the thickness and color of the frames, and change the type of borders.
The text that needs to be placed inside the cells is optional, but if the text is large, it can be broken into paragraphs by applying the tag
If you need to somehow decorate the inserted text, you can use.
In addition to text, we can place pictures in cells using the tag ![]()
:
 |
Another table can even act as the cell content. In this case, creating a nested table is no different from creating a regular table. Just between tags
and | tags are inserted , and rows and cells are inserted into it.
When creating tables, there are some rules to keep in mind:
- only the tag is used to create the table
;
- tag
can only be inside a tag ;
- tags
| and | can only be inside a tag | , any other tag content
ignored by the browser;
- table contents (text or pictures) can only be in tags
| and | ;
- table cells must have at least some content, otherwise the browser may not display them at all, but if some cell must be empty, then a non-breaking space (HTML literal) is usually placed in it;
- the table refers to the block elements of the web page;
- the sizes of the table and its cells depend on the content, i.e. the table is stretched in width and height so that everything fits;
- a small indent is made between the borders of individual cells and between the border of each cell and its contents;
- text in header cells (th element) is displayed in bold and centered;
- borders around the table and its cells are not drawn by default.
Table header
Let's start with a paired tag ,
which gives the table a title. The title text is placed inside this tag, and that must be inside the tag ... And it doesn't matter where the tag is placed in the html-code of the table , the browser will still display the title above the table and center it. But usually the tag placed immediately after the opening tag :
This is a table
Cell 1.1 | Cell 1.2 |
Cell 2.1 | Cell 2.2 |
Display:
Table sections
The html table can be logically divided into parts - sections. There are three types of sections in total:
- header section, into which the header cells are placed, which form the table header;
- body section, in which cells with basic data are located;
- completion section, into which the cells with the totals are placed.
The table header section is formed using a pair tag ... Moreover, it is permissible to use no more than one element. within one table, and it should go in the html code right after the tag .
The body section is created with a paired tag ... One html table can contain several body sections, which allows you to create structural blocks to which uniform design styles can be applied.
The completion section is formed by a paired tag and within one container there can be only one.
All these paired tags must contain tags that form lines related to the corresponding sections:
Column 1 | Column 2 | Column 3 |
Cell 1.1 | Cell 1.2 | Cell 1.3 |
Cell 2.1 | Cell 2.2 | Cell 2.3 |
Outcome 1 | Outcome 2 | Outcome 3 |
Concatenate table cells
It remains to talk about the most important feature of tables - combining cells.Attributes are used to combine multiple cells into one colspan and rowspan tags and | ... The colspan attribute specifies the number of cells that are merged horizontally, and the rowspan is vertically:
1.1 | 1.2-1.3 |
2.1 | 2.2 | 2.3 |
3.1-4.1 | 3.2 | 3.3 |
4.2 | 4.3 |
Example result:
| 1.1
|
1.2-1.3
|
| 2.1
|
2.2
|
2.3
|
| 3.1-4.1
|
3.2
|
3.3
|
| 4.2
|
4.3
|
When concatenating cells, it is important to check the number of cells in each row so that there are no errors. So, the construction | replaces two cells, so there should be two tags in the next line | , or the same construction! If the number of cells in all rows does not match, then empty extra cells will appear.
An example of incorrect html code when merging cells:
cell 1.1 | cell 1.2 |
cell 2.1 | cell 2.2 |
And the display result in the browser:
Those. If you analyze the html-code, you will notice that the first line contains three cells, two of which are combined using the colspan attribute, and the second line contains only two cells. Therefore, the third empty cell appears in the second line.
Tag Attributes
In this post, we have already encountered one attribute of the tag ... With a border attribute that sets the width of the border in pixels. By default, it is 0 and therefore cells are displayed without borders by default.
In addition to the border attribute, there are several other important attributes supported by the tag. ... Let's take a look at them.
Attribute align- sets alignmenttables per page. It can take the values \u200b\u200bleft, center, right, which set the alignment to the left, center and right, respectively. The default is left.
Attribute background, which the sets the background pictureto the table. The address of the image file is taken as a value.
bgcolor - sets background color tables. Can be used in conjunction with the background attribute.
Attribute bordercolorasks frame color tables.
Cellpadding - defines distance between cell border and its content... Improves the readability of the table. The value can be any positive number.
Cellspacing - sets distance between outer borders of cells.
On this talk about how to insert table into html page I'll finish, just to summarize:
- tags are used to insert a table
- table designation, - adding a line and - inserting a cell;
- a table is a block element of a web page;
- the content of cells can be not only text, but also pictures and other tables;
- the table can contain three kinds of sections: header section - , completion section and body section - ;
- to combine cells, use the tag attributes
| colspan and rowspan.
That's all, in the next post I will talk about the navigation tools on the html site. In order not to miss this post, subscribe to my blog updates! Everything, see you soon!
HTML tables are the most powerful and commonly used tool. Basically, webmasters use tables not only as a method for grouping data display, but also for formatting web pages.
Let's look at both ways to use HTML tables. But first, we will learn how to add tables to an HTML document, and also consider the possibilities that HTML provides us with for working with tables.
Creating a simple HTML table
Every HTML table is made up of many cells, which are arranged in rows. And all these lines already form a whole table. A paired tag is used to designate a table .
As you already know, tables are made up of rows and cells. And in order to create the simplest table, we need two more tags: these are paired tags | and which are used to create strings, and paired tags, and | responsible for creating cells. ( Moreover, the closing tags of lines and cells may be missing)
So, given that we already know how to create a simple HTML table, let's apply the above information and create a simple table as shown in (Figure 1).
The simplest table Fig. 1
Simplest table codewhich is shown in Figure 1 (above)
1-Table cell |
2-Table cell |
3-Table cell |
4-cell table |
5-Table cell |
6-Table cell |
7-Table cell |
8-cell table |
9-Table cell |
10-Table cell |
11-Table cell |
12-Table cell |
Complex table code, example in Figure 2
Combining Columns Attribute " colspan" |
Concatenation of strings Attribute " rowspan" |
Attribute " valign"" top "
|
Attribute " valign" "bottom" |
The resulting table on picture 1
... looks ugly. This is all because the tags that we used to create the simplest table ( , , | ) can have various attributes that must be specified: it can be background, borders, dimensions, and so on.
Let's now look at the attributes that apply to the tag ... In order to see how the table will change with applied to the tag attributes, copy the table code and place it in a text document with the .html extension and open it in a browser, adding attributes to the table code and refreshing the page, you will see how your table will look in the browser.
Tag attributes:
1) Attribute "border", sets the width of the border of the entire table in pixels, written as follows: .
2) Attributes "width" and "height" - this attribute sets the recommended width and height of your table, written like this:
3) Attribute "bordercolor" - sets the border color of the entire table, written as follows: .
4) Attribute "align" - table alignment, align \u003d left - the table will be aligned to the left, align \u003d right - to the right, written like this:
5) Attribute "bgcolor" - sets the background color of the table, written as follows:
I think the attributes are enough for you!
Now let's look at the attributes of the tag: and |
Tag Attributes |
1) Tag attribute "height". Note that the tag there is no "width" attribute since the tag responsible for the line, and, accordingly, for the height. And the columns are already responsible for the width. Although the tag has the "height" attribute, but it's almost never used anywhere.
Tag Attributes
2) Tag attribute | "width", attribute "height" (height) of the tag | no, since the tag | is responsible for the table cell and its width, and the row is responsible for the height (tag | ).
3) Tag attribute "colspan". The value of this attribute means the number of columns this cell occupies. In other words, this attribute allows you to merge multiple adjacent cells vertically into one.
4) Tag attribute | "rowspan". The value of this attribute means the number of rows this cell occupies. Accordingly, this attribute allows you to combine multiple cells into one horizontally.
5) Tag attribute | "align". This attribute allows you to horizontally align elements within a cell. Has three values: "left" (to the left of the cell), "center" (to the center), "right" (to the right of the cell). If nothing is specified, the alignment will be left.
6) Tag attribute | "valign". This attribute allows you to vertically align elements within a cell. As well as "align" has only three values: "top" (top), "middle" (middle), "bottom" (bottom). The default is "middle" in the middle.
Let's apply what we have learned so far.
Figure 2 shows our complex table.
Complex table fig. 2
That's basically all you need to know about HTML tables and use them successfully.
Creation of html table in Joomla editor.
To create a table in Joomla, you can use the TinyMce editor found in Joomla by default.
Now using the visual editor Jоmla - you can create simple or complex versions of tables, but be careful not to forget about the width of the content area on your site, so that when creating a table, its width does not exceed this value.
Download files:
HTML video course from Evgeny Popov
The free video course contains 33 HTML lessons.
The video course reveals basic knowledge of HTML and will be useful not only for beginner site builders who are not yet familiar with HTML, but also for more experienced webmasters.
Bordered table
| Name |
Surname |
| Larissa |
Isaeva |
| Dmitriy |
Kolesnikov |
RESULT:
Borderless table
Bordered table
Tag attributes | and | to combine cells
Example
|
ferrets |
| the weight |
the size |
| males |
1.2 - 2.5 kg |
up to 70cm |
| females |
0.7 - 1.0 kg |
up to 40cm |
RESULT:
|
|
ferrets |
| the 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 etc. are no longer supported and their use is considered by the validator to be errors in the code. To design tables, you need to use CSS styles, with which you can replace all obsolete table attributes. For example, instead of the attribute cellspacing to change the distance between table cells, use the property border-spacing, and to align content in table cells - properties text-align and vertical-aling... CSS styles for table decoration
Html table row grouping tags
To create more complex tables, you can use the tags:
Example
Beer consumption
| FULL NAME. |
liters |
| Total |
250 |
| Ivanov Ivan Ivanovich |
133 |
| Petrov Petr Petrovich |
117 |
RESULT:
Html table column grouping tags
Tags attribute and
The easiest way to understand how you can use grouping of rows and columns is with the example of a Sudoku table.
The col tag sets parameters separately for each column. It doesn't matter how you write in the source code:
or
Example
RESULT:
Don't try to style text-align for tags and ... Text placed between tags ... | , does not inherit this style because the tag is not a descendant of any tag , no tag .
The horizontal alignment of text in a specific column of a table can be changed by specifying a style text-align for pseudo class td: nth-child (n) , where n is the column number. However, this method will not work if the attribute is present among the table cells. colspan.
Example
| Name |
Price, rub.) |
| Per-minute payment for solarium (from 4 minutes) | 15 |
| 50 minutes of solarium (14 rubles / min, 1 month) | 700 |
| 100 minutes of 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 the attribute is present among the table cells. colspan.
Due to the versatility of tables, a large number of parameters that control their appearance, tables have long become a definite standard for the layout of web pages. A table with an invisible border is like a modular grid, in which blocks it is convenient to place elements of a web page. However, this is not quite the right approach, because each HTML object is defined for its own purposes and if it is used for other purposes, and moreover, it means that there are no alternatives. This was the case for a long time, until layers came to replace tables in site layout. This does not mean that layers are now used all the time, but the trend has already been clearly outlined - tables are used to place tabular data, and layers are used for layout and design.
Creating a table
A table consists of rows and columns of cells that can contain text and pictures. Typically, tables are used to organize and present data, but tables are not limited to that. With the help of tables, it is convenient to typeset page layouts by arranging fragments of text and images in the desired way.
To add a table to a web page, use the tag ... This element serves as a container for elements that define the contents of the table. Any table consists of rows and cells, which are set accordingly using tags and | ... The table must contain at least one cell (example 12.1). Allowed instead of tag | use tag | ... Text in a cell decorated with a tag | , displayed by the browser in bold and aligned to the center of the cell. Otherwise, the differences between cells created via tags | and | no.
Example 12.1. Creating a table
TABLE tag
| Cell 1 |
Cell 2 |
| Cell 3 |
Cell 4 |
The order of the cells and their appearance is shown in Fig. 12.1. is the body of the table. The body is made up of rows and columns. The table is filled line by line.
Each tag | creates a new line. Further in nested columns are created. Multiple columns can be created. In this case, you need to monitor the number of columns in each row. For example, if the first row had 5 columns, then the next rows should have 5 columns. Otherwise, the table will float. It is possible to combine cells.
How to make a table in html
Let's give an example, html code:
| Example table |
| Column 1 |
Column 2 |
Pay attention to the cell | ... We use the special colspan attribute to combine the cells horizontally. Its numeric value indicates the number of columns to combine. There is also an analogue of this attribute: tag | (table header), where you also need to write colspan. The result will be the same. But the usual td is often used.
Now let's take a closer look at all the attributes of the tag.
.
Tag attributes and properties
To the opening tag various attributes can be written.
1. Property align \u003d "parameter" - sets table alignment. It can take the following values:
In the above example, we aligned the table in the center align \u003d "center".
This attribute can be applied not only to a table, but also to individual table cells. or strings | ... Thus, the alignment will be different in different cells.
for instance
| ... |
| ... |
...
2. Property background \u003d "URL" - sets the background image. Instead of the URL, the address of the background image must be written.
Example
| Example table |
| Column 1 |
Column 2 |
Converted on the page to the following:
In this example, our background image is located in the img folder (which is located in the same directory as the html page), and the image is called fon.gif. Notice that we have added style \u003d "color: white;" ... Since the background is almost black, so that the text does not merge with the background, we made the text white.
3. Property bgcolor \u003d "color" - sets the background color of the table. As a color, you can choose any of the entire palette (see codes and names of html colors)
4. Property border \u003d "number" - sets the thickness of the table border. In the previous examples, we specified border \u003d "1", which means the width of the border is 1 pixel.
5. Property bordercolor \u003d "color" - sets the border color. If border \u003d "0", then there will be no border and the border color will not make sense.
6. Property cellpadding \u003d "number" - padding from the frame to the cell content in pixels.
7. Property cellspacing \u003d "number" - the distance between cells in pixels.
8. Property cols \u003d "number" - the number of columns. If you do not specify it, the browser will determine the number of columns by itself. The only difference is that specifying this parameter is likely to speed up table loading.
9. Property frame \u003d "parameter" - how to display borders around the table. It can take the following values:
- void - do not draw borders
- border - the border around the table
- above - border at the top of the table
- below - border at the bottom of the table
- hsides - add only horizontal borders (top and bottom of the table)
- vsides - only draw vertical borders (left and right of the table)
- rhs - border only on the right side of the table
- lhs - border only on the left side of the table
10. Property height \u003d "number" - sets the height of the table: either in pixels or in percent.
11. Property rules \u003d "parameter" - where to display the borders between cells. It can take the following values:
- all - a line is drawn around each table cell
- groups - the line is displayed between the groups that are formed by tags , , ,
or
- cols - the line is displayed between columns
- none - all borders are hidden
- rows - the border is drawn between the table rows created via the tag
12. Property width \u003d "number" - sets the width of the table: either in pixels or in percent.
13. Property class \u003d "class_name" - you can specify the name of the class to which the table belongs.
14. Property style \u003d "styles" - styles can be set individually for each table.
Now is the time to dive into the table and look at the attributes of table cells. These attributes must be written in the opening tag
.
Attributes and properties and |
1. Property align \u003d "parameter" - sets the alignment of an individual table cell. It can take the following values:
- left - left alignment
- center - center alignment
- right - right alignment
2. Property background \u003d "URL" - sets the background image of the cell. Instead of the URL, the address of the background image must be written.
3. Property bgcolor \u003d "color" - sets the background color of the cell.
4. Property bordercolor \u003d "color" - sets the color of the cell border.
5. Property char \u003d "letter" - sets the letter from which the alignment should be done. The align attribute value must be set to char.
6. Property colspan \u003d "number" - sets the number of combined horizontal cells.
7. Property height \u003d "number" - sets the height of the table: either in pixels or in percent%.
8. Property width \u003d "number" - sets the width of the table: either in pixels or in percent%.
9. Property rowspan \u003d "number" - sets the number of merged vertical cells.
10. Property valign \u003d "parameter" - vertical alignment of the cell content.
- top - aligns the contents of the cell to the top of the line
- middle - middle alignment
- bottom - align to the bottom
- baseline - baseline alignment
Note 1 For tag | the same options are available as for | ... Parameters for one tag | will be hierarchically applied to all inside it
How to prevent table cells from sticking together
In the case of using border (border of cells) and zero padding between cells, they are still glued together and you get a double border. To avoid this, you need to register the border-collapse: collapse table in the stylesheet:
...
Dear reader, now you have learned a lot more about the html table tag. Now I advise you to move on to the next lesson.
| |
|
| | | | | |
| |
