A table is a grid of cells that form rows and columns. Examples of tables include various financial statements, sports results, calendars, schedules, etc. The individual grid block is called a table cell. Table cells can contain a wide variety of information, including numbers, text, and even video and audio objects. Using the HTML language, tables are written line by line.
Element
serves as a container for elements that define the contents of the table. To create a table row, you need to add inside the element
paired block tag
(abbreviated from English "taye row" - table row). How many tags
you add, as many rows in the table and there will be. Opening tag
denotes the start of a new row in the table. The elements are placed after it |
(abbreviated from English "taye data" - table data), each of which specifies a separate cell in this row. Inside element |
you put your content (text, numbers, images, etc.) displayed in that cell. The end of the line is indicated by an end tag |
.
Element
(abbreviated from the English "taYe heading" - the heading of the table) - an optional table element that is used in the same way as the element |
however, its purpose is to create a header for a row or column. Typically the element |
placed in the first row of the table. Browsers display text in an element |
in bold and center it relative to the cell. Using an element in code |
helps people who use screen readers and also improves the performance of search engines indexing tables.
Consider a simple table that has three rows and three columns, with the cells in the first row being the headings of the corresponding columns. By default, tables are usually displayed without a border:
Example: Simple HTML Table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Table border
We already know that tables are displayed without a border by default. To add a border around a table, you need to specify a few simple style sheet rules in your document. Property border controls the display of table grid lines, and also sets the width of the border around the table in pixels. A border appears around the table and between cells. Add a one pixel wide frame to the already created table by setting the property border for all elements of the table, for example, like this:
Example: Applying a Property border
Frame around the table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Single table frame
By default, adjacent table cells will have their own border. This results in a kind of "double border" as seen in the example above. To get rid of the "double border" add the CSS property border-collapse to your stylesheet:
Example: Applying a Property border-collapse
Frame around the table
| Heading 1 | Heading 2 | Heading 3 |
|---|
| Cell 2x1 | Cell 2x2 | Cell 2x3 |
| Cell 3x1 | Cell 3x2 | Cell 3x3 |
Table fields and spacing
By default, table cells are sized to fit their contents, but sometimes it is necessary to leave some padding around table data. Since spacing and margins are related to data presentation elements, this space is customizable using CSS style sheets. Cell field ( padding) Is the distance between the contents of the cell and its border. To add it, use the property padding to element |
or |
... Cell spacing ( border-spacing) Is the distance between them ( |
or |
). First assign the value separate property border-collapse element
and then set the spacing between cells by changing the parameter value border-spacing... Previously, attributes were responsible for the fields and cell spacing. cellpadding and cellspacing element
but they were deprecated in the HTML5 specification.
Usage example padding and border-spacing:
Example: Applying Properties padding and border-spacing
padding and border-spacing
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Table Width
The width occupied by the table in the browser window can be specified using the property width CSS, in pixels or percentages. Specifying the width of the table in pixels allows you to determine its exact width. The percentage allows you to make the table flexible, i.e. it will "stretch" or "shrink" depending on what other elements are on the page and how large the browser window is.
Here is an example using the property width: Table (width: 100%;) Example: Applying a Property width
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
width: 100%
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Concatenating cells (colspan and rowspan)
One of the main features of a table structure is cell concatenation, which involves stretching a cell to span multiple rows or columns. This allows for complex table structures: headers
or cells |
are combined by adding attributes colspan or rowspan... Attribute colspan determines the number of cells that a given cell extends horizontally, and rowspan- vertically.
Concatenate columns
Column concatenation is achieved using the attribute colspan in elements |
or |
- the cell is stretched to the right to cover subsequent columns. In the following example, the attribute value colspan is equal to 2, which means that the cell must span two columns.
Example: Applying an Attribute colspan
Colspan attribute
| colspan= "2"> Cell with two columns |
|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Concatenating strings
Strings concatenated using an attribute rowspan, behave exactly like merged columns, with the only difference that the range of cells is from top to bottom and spans multiple rows.
This example stretches the first cell of the table two rows down:
Example: Applying an Attribute rowspan
| Cell on two lines |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
Rowspan attribute
| rowspan= "2"> Cell on two lines |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
Table header
A pair tag is used to create a table heading or caption
(from the English caption - signature). Element
is for organizing the header of the table. Located immediately after the tag
, but outside the description of the row or cell.
Example: Using a Tag
Caption element
This is the header of the table
| Cell on two lines |
Cell 1 | Cell 2 |
|---|
| Cell 3 | Cell 4 |
Grouping tags for table items
To group table elements, use the tags
,
and
... Just as a web page can contain a header, body, and footer, a table can contain a head, body, and footer. To logically group rows at the top of the table (that is, to create the top head of the table), use the tag
... Table headers must be placed in the element
, for example:
| Heading 1 | Heading 2< /th> |
|---|
The main content (body) of the table must be inside the element
(there may be several such blocks in the table). To logically group rows at the bottom of the table (that is, to create a "footer" of the table), use the tag
(no more than one tag is allowed in one table
). In the source code, the tag
placed before the tag
... Apart from logical grouping, one of the reasons for using elements
and
is that if your table is too long to be displayed at one time on screen (or to be printed), then the browser will display the title (
) and the last line (
) when the user scrolls through your table.
Example: Tags
,
and
Thead, tbody and tfoot tags
| This is the header of the table |
|---|
| This is the footer of the table |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Despite the fact that we are in front of
added
, it nevertheless appears at the end of the table. This comes from the fact that
can contain many lines. But the browser needs to render the bottom of the table before it gets all the (potentially numerous) rows of data. That's why
in the code is written before the element
.
Tasks
Tables are one of the most important yet complex elements that must be present on web pages. With their help, it is convenient to present important and useful information in a rather concise form. Of course, most editors in templates working on different engines allow you to automatically insert a table into a page of a site or a separate publication, but what if the design of a web resource, its pages are created from scratch? Then a novice wizard may face a problem: how to do it. Let's figure out how to correctly and quickly create this element. Choosing an editorFirst of all, starting to create a table, you should decide on the editor in which you will work. Of course, the easiest way is to choose the program in which you create the main site code. But it is best to use a good old notebook for these purposes. You may ask why to complicate your life, because if you do everything at once in the editor, then the result can also be seen immediately, and you can also use the program hints. Yes, this is true, but by creating a table from scratch, you will not only be able to thoroughly study the very principle of its creation, but also prevent annoying typos and errors in the main code. Sometimes it happens that the cursor accidentally moves down, and in the process of writing an error creeps into the code, which is sometimes difficult to find. Once you create a table in a notepad, you can copy its cipher and paste it where you want it. Algorithm for creating a tableFirst, let's put together a short algorithm on how to make a table in HTML. This is so that you understand the sequence of each step. Then we will analyze exactly how to perform each of the points. 
Let's start with the preparatory steps. 1. Draw a schematic image of the table on a sheet of paper. 2. We count the number of lines and cells. If the number of the latter is different, we count for each row separately. 3. Determine the number of header cells in the row (for example, cells "No.", "Name", etc.). 4. Write down the main parameters of the table - color, height and width, text alignment - in general, whatever you think is necessary. 1. Insert tags of the table. 2. Insert line tags based on the number you need. 3. In the lines, insert the tags of cells (regular and capital), also based on the number that you have written on paper. 4. Set the parameters for the table as a whole. 5. If necessary, set indicators for individual cells. 6. We fill our cells with text. 
Create a tableSo you have chosen an editor, now let's figure out how to create a table in HTML. The tag with which the table is inserted into the page code ( ), is paired, that is, our construction begins with this tag, and ends with .Having inserted the table tags, we proceed to create rows and cells. Immediately, we note that these elements are also paired. Tag specifies strings, and | - cells. For header cells, use the paired element | . As already mentioned, the first step is to draw up the lines, then write the cells in them. In order not to get confused, we advise you to either indent between each block in one or two lines, or write a new block of elements using the "Tab" key. How might it look like? Like that: ;;| P / p No. | ;| Surname | ; ;;| 1 | ;| Ivanov | ; | ; .
As you can see, there is nothing complicated about it. The main thing is not to get confused in the number of lines and cells. Otherwise, the table may skew. We have discussed the creation of a table in HTML, now we can proceed to the parameters of both the matrix itself and its rows and cells. 
Table parametersWhen the code is written, you should pay attention to the following points: alignment in borders, background, text, and so on. Table parameters are set in the tag ... These include:1. Border - the width of the borders. Set as an integer. By default, the borders of any table are zero. 2. Bordercolor - border color. It can be set as a hexadecimal color code (# 00008B), and its name in English (DarkBlue). It is always gray by default. 3. Bgcolor - Also set by code or name. 4. Align - text alignment behind the table. The default is left-aligned. There are the following options for this parameter: - left - wrap around to the right;
- right -wrapping to the left;
- center - displays the table in the center without wrapping.
5. Width and height - width and height of the table. It can be set both in pixels and as a percentage (relative to the size of the browser window). Prescribing this or that indicator, you should pay special attention to the design. The parameter must be followed by an "equal" sign, followed by the specified value in quotation marks. As for the color of the text, it is styled in the same way as normal text in HTML format. An example of table design: ;;| P / p No. | ;| Surname | ; ;;| 1 | ;| Ivanov | ; | ; .
String parametersSo, we have already figured out how to make a table in HTML and register its main parameters. But what if we need to highlight a row? Should it be styled differently from the main text of the table? String parameters are written in the tag exactly the same as the table data. The following variables can be set for a string:1. Border, bordercolor and bgcolor already known to you. 2. Align - alignment of text in a line. It can take the values left, center and right. 3. Valign - this tag aligns the text vertically. It takes the following values: - top - the text is aligned to the top border;
- middle - in the center;
- bottom - along the bottom border.
Example of line formatting: Cell parametersAnd the last thing worth paying attention to for those who want to know how to make a table in HTML is the parameters of individual cells, both normal and capitalized. In fact, everything is done in the same way as for a table or row. The only thing is that two more important elements are added: 1. Colspan - this parameter specifies the number of columns that the cell can span. 2. Rowspan - already indicates the number of rows that this cell occupies. Since the design is no different from writing a line, we will not give an example of the code. 
conclusionsMaking a table is not as difficult as it might seem at first glance. The main thing when writing her code is perseverance and attention. As for how to insert a table into HTML, you just need to copy and paste its cipher in the exact place on your page where you think it should be located. Feel free to experiment, and you will soon master the technique of creating tables to perfection. Good luck!
HTML tables are so functional that you can use them to typeset entire sites (read). Now we will talk about inserting simple HTML tables into a web page, parsing only the markup, but not touching the design, because it is better to decorate tables with CSS styles.
Table tags and attributes
Here are the basic elements you need to create tables:
- the container inside which the table is located (the same as for labeled or
for numbered lists).
- border- an attribute that determines the thickness of the frames. It is better to use the border CSS property instead.
-
specifies the signature of the table. You don't need to use the container, but if you still decide to title the table, then put it right after the tag
, outside cells and lines.
- a paired tag containing a table row (cells located at the same level horizontally).
|
- the tag that creates the table header cell. Outwardly, its content differs from the content in other cells - usually the text inside |
the browser is bold and centered.
- a container with which a simple cell is created. How many such tags will the string contain (tag
, there will be as many cells in it: one tag - one cell.
-
allows you to group columns, quickly and without cluttering the code to set common characteristics to them. Using a container, you can separate logical parts of a table from each other. Located after the tag
, if not, then after
.
-
used for the same purpose as
.
may contain
but not vice versa.
- span- an attribute that specifies the number of columns to which the container properties are applied
.
-
,
and
- containers that allow you to divide the table, respectively, into the upper (headers), main (body) and lower (final) parts. In an HTML table, the sequence of these tags is the same as the sequence of containers
,
and in the HTML document.
- colspan needed to combine cells in a row. The attribute value contains a number that specifies the number of cells to be merged.
- rowspan merges cells into columns.
Example of creating a table
Create an HTML document and copy the following code into it:
Example table
Website building tools
| Appointment | Tool |
| Markup | Html | XHTML |
| Registration | CSS |
| Development of | PHP | Python |
In the browser, the document will look like this: Let's analyze which lines of code are responsible for what.
- opened the table by setting the thickness of the frames.
-
Website building tools
- titled it.
- opened a line.
|
Appointment |
- created a cell with a title design.|
Tool |
- created a second header cell in the row. The colspan parameter indicated that this cell should occupy two horizontally.
- closed the line. The rest of the lines were created in the same way. |
Markup |
Html |
XHTML |
- added the second row of the table with the usual, not header, cells. Subsequent rows and cells were inserted similarly.
- closed the table.
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 keep track of the number of columns in each row. For example, if the first row had 5 columns, then the next rows should also 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 you can write various attributes.
1. Property align = "parameter" - sets the alignment of the table. It can take the following values:
In the above example, we aligned the table in the center align = "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 example
| ... |
| ... |
...
2. Property background = "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 the above 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. Note that in the tag we have added style = "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 = "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 = "number" - sets the thickness of the table border. In the previous examples, we specified border = "1", which means the width of the border is 1 pixel.
5. Property bordercolor = "color" - sets the border color. If border = "0", then there will be no border and the border color will not make sense.
6. Property cellpadding = "number" - indentation from the frame to the cell content in pixels.
7. Property cellspacing = "number" - the distance between cells in pixels.
8. Property cols = "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 the loading of the table.
9. Property frame = "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 = "number" - sets the height of the table: either in pixels or in percent.
11. Property rules = "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 the columns
- none - all borders are hidden
- rows - the border is drawn between the table rows created through the tag
12. Property width = "number" - sets the width of the table: either in pixels or in percent.
13. Property class = "class_name" - you can specify the name of the class to which the table belongs.
14. Property style = "styles" - styles can be set individually for each table.
Now is the time to dive into the table and look at the attributes of the table cells. These attributes must be written in the opening tag.
.
Attributes and properties and |
1. Property align = "parameter" - sets the alignment of a separate table cell. It can take the following values:
- left - left alignment
- center - center align
- right - right alignment
2. Property background = "URL" - sets the background image of the cell. Instead of the URL, the address of the background image should be written.
3. Property bgcolor = "color" - sets the background color of the cell.
4. Property bordercolor = "color" - sets the color of the cell border.
5. Property char = "letter" - sets the letter from which the alignment should be done. The value of the align attribute must be set to char.
6. Property colspan = "number" - sets the number of horizontal cells to combine.
7. Property height = "number" - sets the height of the table: either in pixels or in percent%.
8. Property width = "number" - sets the width of the table: either in pixels or in percent%.
9. Property rowspan = "number" - sets the number of merged vertical cells.
10. Property valign = "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.
Source code of a simple HTML table
Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
Cell 5 |
Cell 6 |
Cell 7 |
Cell 8 |
Cell 9 |
HTML table headers
There are 2 types of cells in HTML tables. The tag defines a cell of the usual type. If a cell acts as a heading, it is identified with a tag.
Example HTML table with th title
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Audi |
Mercedes-Benz |
Bmw |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Smart |
Rolls-royce |
HTML table source with th headers
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
Bmw |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Smart |
Rolls-royce |
Concatenate cells in an HTML table
HTML tables have the ability to combine cells horizontally and vertically.
To merge cells horizontally use the colspan = "attribute NS", at the cell or, where x
To merge cells vertically use the rowspan attribute = " NS", at the cell or, where x- the number of cells to combine.
Cells can be merged horizontally and vertically at the same time. To do this, use both the colspan and rowspan attributes for the desired cell:
Cell text |
Note that as you merge cells, the number of items in the row changes. For example, if a table has 3 columns with cells, and we combine the first and second cells, then there will be 2 elements inside the tag defining this row, the first of them will contain the colspan = "2" attribute.
Example HTML table with cell concatenation
HTML table source with merged cells
Nissan |
|---|
Model |
Equipment |
Availability |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Headers and footers and signature in HTML tables
HTML tables can be divided into 3 areas: header, body, footer.
This is done by wrapping the rows of the selected part of the table with tags. defines the header area, - the footer area, - the body of the table.
By default, headers and footers are not styled (this can be done via CSS if needed), but can be used by browsers. For example, when printing a multi-page table, headers and footers may be duplicated on each printed page.
The correct order of placement of area tags in HTML table code is as follows: first the header, then the footer, then the main body. In this case, the main part on the page will be displayed between the headers and footers.
You can add a signature to the table as needed. To do this, use a tag.
Example HTML table with headers and footers and signature
Source code for the table with headers and footers and signature
Complete set Renault Sandero Stepway
Characteristic |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Availability |
+ |
+ |
+ |
|---|
Engine power |
0.9 (90 HP) |
0.9 (90 HP) |
1.5 (90 HP) |
|---|
Fuel |
petrol |
petrol |
diesel |
|---|
Toxicity rate |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Columns and column groups
HTML table can be divided into columns and column groups using the and tags.
This separation allows you to set styles for the table using a minimum number of CSS properties, thereby reducing the amount of table code (instead of defining styles for each cell in a column, you can set styles for one or more columns at once).
Tags and placed inside the tag before the tags, AKP6 (EDC) Transmission |
HTML table c source code and
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Characteristic |
|---|
1.5 (90 HP) |
1.2 (115 hp) |
1.5 (90 HP) |
Engine power |
|---|
diesel |
petrol |
diesel |
Fuel |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Transmission |
|---|
Tables in site page layout
On modern sites, it is important to correctly display pages both on computers and on mobile devices. It is not advisable to use tables to create a skeleton of an HTML page, since the ability to adapt content to screens of different sizes (computers, smartphones, tablets) is lost.
The Table group tags are best used within a page to display table-formatted content.
| |
|
| | |
| | |
