There are a lot of elements in the HTML language, and each of them is unique in its own way. The table is a very interesting, demanded and serious object. Thanks to it, you can not only provide information in a convenient form, but also build a whole site frame.
Previously, almost all webmasters used tables specifically for site layouts. Initially, tables were not invented for this. Therefore, to mark up the site you need to use the block div element.
If you do not want to always be a beginner, get used to doing everything right right away. This is very important in the HTML language. Only normal information (text, links, lists, images, etc.) should be placed in the table, and not the entire site.
How to make an HTML table?
A table is a complex element that consists of a large number of other elements. Remember that when creating cells or rows, you always need to put a closing tag immediately. Otherwise, everything will fly away. The browser handler will search for the end of the element and, until it finds it, will include everything further in the table. The result will be porridge.
If you write a site in Notepad, you will have to do everything by hand. If in a ready-made editor, then usually there are buttons - "insert table", "insert image" and so on.
Example of table 2 by 2.
<table width = "100%" border = "1">
<tr>
<td> text of the first cell of the first row </td>
<td> text of the second cell of the first row </td>
</tr>
<tr>
<td> text of the first cell of the second row </td>
<td> text of the second cell of the second row </td>
</tr>
</table>
The <table> and </table> tags indicate the beginning and end of the table. The <tr> and </tr> tags are the beginning and end of a line. One line can contain any number of cells, which are determined by the <td> and </td> tags.
The main rule: the number of cells in each row should be the same. This is a table.
But, as in the Word and Excel editor, cells can be combined.
How to combine cells in a table?
To combine using the attributes Colspan and Rowspan. Span translates as “cover” or “overlap”. The literal meaning is to cover / overlap cells / rows.
The value of this attribute must specify how many rows or cells will be overlapped. The following is a good example of using both HTML attributes in a table.
In this example, 3 cells were combined in the first row using the colspan = "3" attribute. Then the first cell of the second row was spread over four rows. Remember that we stretch / combine only in the first cell. Her property will spread further. Everything that comes before will not be affected.
If you have 5 cells and you want to combine from 2 to 4, then you need to specify the attribute colspan = "3" at the number 2 cell.
Pay attention to cell number 9 in the figure above. They combined both cells and rows at once. Such actions are not prohibited.
See another example for fixing information. Since some confuse attributes and sometimes instead of cells, rows are combined.
Table design
Take the normal, standard HTML case. The table has two rows, two cells each.
The result of the code will be as follows.
As you can see, there are no effects. You can add a frame, specify the width and height.
You can also play with the alignment. It can be aligned both in height and in width.
Align for horizontal alignment, and valign for vertical alignment. Here is such a result.
The align and valign attributes can be applied to the entire line. Then all the cells that are in it will obey these attributes.
In addition to the <td> and <tr> tags, there is an additional <th> tag. Actually it is an analog of <td>, but it is used only in the first line and serves as a heading. By default, text in <th> is centered and bold.
How to connect styles to a table?
Like any HTML tag, a table can be transformed through styles. You need to specify a stylesheet in the head <link rel = “stylesheet” href = “style.css” type = “text / css”> area or a ready-made style (also indicated in head).
<head>
...
<style type = "text / css">
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: # 000000;
}
.my_class
{
color: # 666666;
}
</style>
...
</head>
If you just specified table, then this style will apply to all tables on the page. Absolutely to everyone. But, if you use the second method, where an arbitrary name with a dot is specified, then this style can be applied to any desired table without affecting the others.
<table class = "my_class">
Note that classes can be used both for the table tag and for a specific cell or row.
<table class = "style_table" width = "100%" border = "1">
<tr class = "style_row1">
<td class = "style_td1"> text of the first cell of the first row </td>
<td class = "style_td2"> text of the second cell of the first row </td>
</tr>
<tr class = "style_row2">
<td> text of the first cell of the second row </td>
<td> text of the second cell of the second row </td>
</tr>
</table>
If a mistake is made somewhere in the name of the style, you will not see the result. If there are errors in the style itself, but the names coincide, there will be no effect. Each comma or colon plays a big role.
Additional attributes for tables
What attributes can be written in style classes? There are so many attributes that apply specifically to tables. Consider the most basic ones that are useful to you.
align | Horizontal alignment |
valign | Vertical alignment |
background | Background image in cell / table |
bgcolor | Cell background color |
bordercolor | Table / cell frame color |
height | Cell height |
nowrap | Prevent text wrapping in a line. |
width | Cell / Table Width |
As you can see, you can use HTML in a table with a huge number of "tools".
Beautiful created using HTML tables. Examples
Thanks to the styles you can create various beautiful tables. It all depends on what and how you like.
It’s like cooking. The ingredients are the same, but there are a lot of recipes.
As you can see, if you use HTML tags, the table can be transformed beyond recognition. The boundaries of possibilities are determined by your imagination.