Using HTML in a table


In HTML there are so many elements, andeach 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 frame of the site.

Previously, almost all webmasters used tables for site layout. Initially, tables for this were not invented. Therefore, for site markup, you need to use the block div element.

If you do not want to always remain a novice,get used to doing everything right right away. This is very important in HTML. In the table you need to place only the usual information (text, links, lists, images, etc.), and not the whole site.

How to make an HTML table?

A table is a complex element that consists ofa large number of other elements. Remember that when creating cells or rows, you should always put a closing tag at once. Otherwise, everything will fly away. The handler in the browser will look for the end of the element and, until it finds it, everything else will be included in the table. The result will be porridge.

If you write a website in "Notepad", then all you have to do with your hands. If in the finished editor, then there are usually buttons - "insert a table", "insert an image" and so on.

Example of table 2 to 2.

<table width = "100%" border = "1">


<td> the text of the first cell of the first line </ td>

<td> the text of the second cell of the first line </ td>

</ tr>


<td> the text of the first cell of the second line </ td>

<td> the text of the second cell of the second line </ 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 the line. In one line there can be as many cells as possible, which are defined by the <td> and </ td> tags.

The main rule: the number of cells in each line should be the same. This is a table.

html in the table

But, as in the Word and Excel editor, cells can be combined with each other.

How to merge cells in a table?

To combine, use the Colspan and Rowspan attributes. Span translates as "embrace" or "overlap". The literal meaning is to cover / cover cells / lines.

How to merge cells in a table

In the value of this attribute, you need to specify how many rows or cells will be blocked. The following is a good example of using both HTML attributes in a table.

tags html table

In this example, in the first row, 3cells using the colspan = "3" attribute. Then the first cell of the second line was stretched into four lines. Remember that we stretch / unite only in the first cell. Its property will be extended further. Everything that goes before will not be affected.

If you have 5 cells and want to merge from 2 to 4, then you just need to specify the colspan = "3" attribute in cell number 2.

Pay attention to the cell number 9 in the figure above. There they immediately combined cells and lines. Such actions are not prohibited.

Look at another example to fix the information. Since some confuse attributes and sometimes combine strings instead of cells.

Combining strings html

Designing tables

Take the usual, standard HTML case. The table has two rows of two cells each.

tags html table

The result of the code will be as follows.

table in html

As you can see, there are no effects. You can add a frame, specify the width and height.

html table attributes

You can also play with the alignment. You can align both height and width.

table alignment

Align for horizontal alignment, and valign for vertical alignment. Here is the result.

example of creating tables in html

The align and valign attributes can be applied to the entire string. Then all the cells that are in it will obey these attributes.

In addition to the <td> and <tr> tags, there is an additional tag<th>. In fact, this is an analog of <td>, but it is used only in the first line and serves as a header. By default, the text in <th> is centered and bold.

How to connect styles to a table?

Like any HTML tags, the table cantransformed through styles. You need to specify a stylesheet in the head <link rel = "stylesheet" href = "style.css" type = "text / css"> area or the finished style (also in the head).



<style type = "text / css">

table {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: # 000000;




color: # 666666;


</ style>


</ head>

If you specified just a table, then this styleapply to all tables on the page. Absolutely to all. But, if you use the second method, where you specify an arbitrary name with a period, then this style can be applied to any desired table, without affecting others.

<table class = "my_class">

Note that classes can be used for both the table tag, and for a particular cell or string.

<table class = "style_table" width = "100%" border = "1">

<tr class = "style_row1">

<td class = "style_td1"> the text of the first cell of the first line </ td>

<td class = "style_td2"> the text of the second cell of the first line </ td>

</ tr>

<tr class = "style_row2">

<td> the text of the first cell of the second line </ td>

<td> the text of the second cell of the second line </ td>

</ tr>

</ table>

If there is an error in the name of the style,then the result will not be seen. If there are mistakes in the style itself, but the names coincide, there will be no effect. Each comma or colon is important.

Additional attributes for tables

What attributes can be written in style classes? There are so many attributes that apply to tables. Consider the most basic that you need.


Horizontal Alignment


Vertical alignment


Background image in cell / table


Background color in cell


Table / cell border color


Cell height


Prohibits the transfer of text in a line.


Width of cell / table

As you can see, you can use HTML in the table with a huge number of "tools".

examples of html tables

Beautiful created using HTML tables. Examples

Thanks to the styles, you can create various beautiful tables. It all depends on what you like and how.

html tables examples
It's like cooking. The ingredients are the same, but there are a lot of recipes.

how to make an html table

As you can see, if you use HTML tags, the table can be transformed beyond recognition. The limits of possibilities are determined by your imagination.