Last Updated:

How to create HTML Tables

HTML Tables
Tables help to structure the content, convey more clearly information to visitors. They are convenient and informative. To create tables and add to the site, you need to use special HTML tabular tags.

Main tags

So, any table starts with the <table tag> and ends with the </table>
<tr> - the beginning of the line; </tr> is the end of the line;
<td> and </td> are the beginning and end of the cell, respectively.
Built-in styles that specify the basic properties of the table (written inside the table tag):
  • border - width of the border in pixels. If you specify a value of 0, there is no boundary.
  • widht is the width of the table. You can specify a percentage (how much space it will occupy on the page) or in pixels.

Parameters are specified by variables such as ALIGNBGCOLORBORDERBORDERCOLORCELLPADDINGCELLSPACINGHEIGHTWIDTHCOLSPANNOWRAPROWSPANVALIGN. They are also called attributes.

Attributes of the table tag

  • ALIGN - Right or left alignment.
  • BGCOLOR - background color.
  • BORDER - border thickness in pixels.
  • BORDERCOLOR - border color.
  • CELLPADDING - the distance between the curb and the contents of the cell.
  • CELLSPACING - the distance between two table frames (because by default, the table has a double frame, and if you set the value cellspacing=0, the frame will be single.
  • HEIGHT - height, can be measured both in pixels (in this case, the unit of measurement is omitted, i.e. for example, height="100", and in % (then it will look like this: height="100%").
  • WIDTH - width, as well as height is measured in pixels and percentage.
  • style="float: left; margin: 0 5px 2px 0;" - wrapping the table with text on the left,
  • style="float: right; margin: 0 0 2px 5px;" - Wrapping the table with text on the right.

Attributes of the td tag

  • ALIGN - also means aligning the contents of cells.
  • BGCOLOR - cell background color,
  • BORDERCOLOR - cell frame color,
  • COLSPAN - the number of table cells combined horizontally, so you can specify, for example, the table header. We will analyze in more detail in the examples below.
  • NOWRAP - causes the contents of the cell to be displayed in it without wrapping the line.
  • ROWSPAN - shows the number of cells combined vertically.
  • VALIGN - vertical leveling of contents. Variables: top - on the top edge, middle - on the middle, bottom - on the bottom edge.

Simple table

The code of a simple table consisting of 2 columns and 3 rows will look like this:

 
<table border="1" width="52%"> <tr> <td>reacontinent in 1 column and 1 row</td> <td>contact in 2 column and row 1</td> </tr> < tr> <td>the content in column 1 and row 2</td> < td>the 2nd column and row 2 content</td> </tr> <tr> <td>subject in column 1 and 3 row</ td> <td>the 2nd column and row 3 contents</td> </tr></table>
<table border="1" width="52%"> <tr> <td>content in 1 column and 1 row</td> <td>content in 2 column and 1 row</td> </tr> < tr> <td>content in 1st column and 2nd row</td> <td>content in 2nd column and 2nd row</td> </tr> <tr> <td>content in 1st column and 3rd row</td > <td>content in 2nd column and 3rd row</td> </tr></table>
<table border="1" width="52%"> <tr> <td>content in 1 column and 1 row</td> <td>content in 2 column and 1 row</td> </tr> < tr> <td>content in 1st column and 2nd row</td> <td>content in 2nd column and 2nd row</td> </tr> <tr> <td>content in 1st column and 3rd row</td > <td>content in 2nd column and 3rd row</td> </tr></table>

Appearance:

<table><tr>
<td>The contents of column 1 of row 1</td>
<td>The contents of column 2 of row 1</td></tr>
<tr>
<td>The contents of column 1 of row 2</td>
<td>The contents of column 2 of row 2</td></tr></table>

Complex tables

The greatest difficulties are caused by novice webmasters to create complex tables. To do this, we will use the techniques - "table in a table", combining columns and combining rows.

Table in table

In order to nest a table in a table, you need to paste the code of table 2 into the desired cell of the main table. Example:

1 cell2 cell
Cell 1 of Table 2Cell 2 of Table 2
Cell 3 of Table 2cell 4 of table 2
4 cell5 cell6 cell

Copy the code:

 
<table border="3"><tr><td>1 cell</td><td>2 cell</td>
<td><table border="1" bgcolor="A1CCDD"><tr><td>cell 1 of table 2</td><td>cell 2 of table 2</td></tr><tr> <td>cell 3 of table 2</td><td>cell 4 of table 2</td></tr></table ></td></tr><tr><td>4 cell</ td><td>5 cell</td><td>6 cell< /td></tr></table>
<table border="3"><tr><td>1 cell</td><td>2 cell</td> <td><table border="1" bgcolor="A1CCDD"><tr><td >cell 1 of table 2</td><td>cell 2 of table 2</td></tr><tr><td>cell 3 of table 2</td><td>cell 4 of table 2</td>< /tr></table></td></tr><tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>< /table>
<table border="3"><tr><td>1 cell</td><td>2 cell</td>
<td><table border="1" bgcolor="A1CCDD"><tr><td>cell 1 of table 2</td><td>cell 2 of table 2</td></tr><tr><td >cell 3 of table 2</td><td>cell 4 of table 2</td></tr></table></td></tr><tr><td>cell 4</td><td >Cell 5</td><td>Cell 6</td></tr></table>

Merge columns using colspan

The Colspan tag is used to combine columns. Assign colspan a value of 2 to combine 2 cells into one. Thus, let's create a header for the table.

Two-column cell
Cell 1Cell 2
Cell 3Cell 4

Code:

 
<table>
<body>
<tr>
<th style="text-align: center;" colspan="2">A two-column cell</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Click 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
<table> <tbody> <tr> <th style="text-align: center;" colspan="2">Two-column cell</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table>
<table>
<body>
<tr>
<th style="text-align: center;" colspan="2">Two-column cell</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

String concatenation using rowspan

Merging works in this case vertically by merging the cells. Set the rowspan attribute to specify how many cells to merge.

Two-row cellCell 1Cell 2
Cell 3Cell 4
Cell 5Cell 6Cell 7

Code:

 
<table>
<body>
<tr>
<th rowspan="2">A two-line cell</th>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Click 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</tbody>
</table>
<table> <tbody> <tr> <th rowspan="2">Two-row cell</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</ td> </tr> </tbody> </table>
<table>
<body>
<tr>
<th rowspan="2">Two-row cell</th>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</tbody>
</table>

How to insert a table into a website

For the correct display of the table in the message on the site, you need to add table tags to the record in HTML mode (for wordpress - this is the "Text" mode). Some platforms and engines do not display tables correctly (such as Blogger and Ucoz). There is a secret to inserting a table in difficult cases - it is necessary to compress the code in any online code compressor before inserting.