Tables in HTML

In order to arrange the table first of all you need to assign a number of rows and columns. Usually its difficult to understand that the <strong>html table</strong> markup supposes table description line by line. So, in order:

<table> </table> - opening and closing tags table.
<tr> </tr> - opening and closing tags for table row description.
<td> </td> - opening and closing tags for table cell description.

 
 
<table>
<tbody>
<tr>
<td> 1 cell</td>
<td> 2 cell</td>
</tr>
</tbody>
</table>

Table would look like this:

1 cell 2 cell

Please note, <table> - opening table tag, <tr> - opening line tag, <td> </td> <td> </td> - two opening and closing cell tags, < /tr> - closing line tag, </table> - closing table tag.

 
 
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</tbody>
</table>

Table would look like this:

cell 1 cell 2
cell 3 cell 4
 
 
<table>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</tbody>
</table>
cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9

Note that there is no matter how many spaces or line feeds you marked, all these characters are ignored in HTML text.

How to merge cells?

Add to tags structures colspan and rowspan.
colspan - merges cells in table lines;
rowspan - merges cells in table columns.

 
 
<table border="1">
<tbody>
<tr>
<td colspan="2">cell 1</td>
<td>cell 1</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2">cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>
cell 1 cell 1
cell 3 cell 4 cell 5
cell 6 cell 7

Inputting text into the cells.
align - horizontal alignment;
valign - vertical alignment.

 
 
<table border="1">
<tbody>
<tr>
<td colspan="2" align="center">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2" valign="top"> cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>
cell 1 cell 2
cell 3 cell 4 cell 5
cell 6 cell 7

The width of table borders.

border the value of this parameter will indicate the border width.

 
 
<table border="5">
<tbody>
<tr>
<td colspan="2" align="center">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
<td rowspan="2" valign="top"> cell 5</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
</tbody>
</table>
cell 1 cell 2
cell 3 cell 4 cell 5
cell 6 cell 7

If the border = "0"

Table would look like this:

cell 1 cell 2
cell 3 cell 4 cell 5
cell 6 cell 7
Html BODY
HTML Style
META tag in HTML
Color Codes in HTML