Defining a table structure in HTML

To better align or arrange content, HTML offers a table structure. Creating a table in HTML is very simple if you keep in mind that you have to create one row at a time and create one column at a time for each row. See the HTML table code generator tool to create HTML code for a desired table. Let’s suppose you need a table with one row and two columns. To create a such table in HTML, first you would write an HTML instruction that will start the table; next, you will write the instruction that will create the row. Then, you will create the first column; finally, then the last column.

So let’s cover the HTML tags that will create a table. To define a table, we start with the <table> tag. Next for each row, use the <tr> tag. The “tr” in <tr> tag stands for table row. For each column in each row, use the <td> tag, the “td” in <td> stands for table data. Let’s say we want to create the following table :

To create the top table, use the following code :

<table width="190" border="1">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>

In the first line above, our first tag starts our table. In the table tag, we have two attributes. The first attribute width specifies that the width of this table is 190 pixels. The second attribute, border specifies to use a border thickness of 1 pixel. With the second line, <tr>, we start our first row. The third line creates our first column with the <td> tag. Any content you want to display as a table must be placed inside the <td> (or <th> tag, as discussed below) tag. Just like the first column we created, we create the second column with the <td> tag. The fifth line ends our row and the table ends with the last line.

When you create a table, you normally change many default properties of the table. You may, for instance, change the background color of the table. The following sub topics discuss some of the common changed properties of table:

Controlling cell spacing

To add space among a table cells, use the cellspacing property. The following examples show some effects of different cellspacing values:

Examples showing different cell spacing values

To create a table to separate cells by ten pixels, use the following code:

<table width="40" border="1" cellspacing="10">
<tr>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>

Controlling cell padding

To add space around the content of a cell, use cellpadding in the table tag. Here are some examples:

If you wanted to create a table with cellpadding of 5 pixels, use the following code:

<table width="40" border="1" cellpadding="5">
<tr>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
</tr>
</table>

Output

Modifying table background color

If you like to change the background color for the entire table, just use the bgcolor property in the <table> tag. You can also change the color for the entire row (by inserting bgcolor inside the <tr> tag) or for an individual cell (by inserting bgcolor inside the <td> tag). To specify a color for the bgcolor property, you can either use a RGB value (such as #22DD55, #22DDAA, etc.) or color name (such as “white”, “yellow”, etc.). Listing 1 shows some examples:

Listing 1 – Examples of different table background colors with corresponding HTML code

<table width="20" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>

Example Output

<table width="20" border="1" cellspacing="0" cellpadding="">
<tr bgcolor="#FFCCCC">
<td>1</td>
<td>1</td>
</tr>
<tr bgcolor="#66CCFF">
<td>1</td>
<td>1</td>
</tr>
</table>

Example Output of this code

<table width="20" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FF99FF">0</td>
<td bgcolor="#FFCC99">0</td>
</tr>
<tr>
<td bgcolor="#FFFF33">0</td>
<td bgcolor="#663399">0</td>
</tr>
</table>

Example Output of this code

Suppose you specify “red” as the background color for the entire table (HTML code : <table bg=”red”>) and for one particular cell you set the background color to “green” (HTML code : <td bg=”green”>)? Will the browser use the background color red or green for that particular cell? It will be green because the tag most closest to the content takes precedence (in this case it’s the <td> tag). All that means is that for the same table you can conveniently:

1. Set the background color for the entire table. Assume we set it to as red : table (<table bg=”red”>).
2. Override the table color red at any desired row by <tr bg=”green”>). This will set the background color as green for the entire row.
3. Override background colors for both the <table> tag and the <tr> tag. For example, <td bg=”blue”> will set the background color for one cell as blue regardless of what, if any, background color is specified in the <table> tag and the <tr> tag.

Visit >> HTML online Compiler and practice html codes here

Controlling table placement

By default, the browser places a table on the left margin just like the text is placed on the left. With the align property, we can change the placement of the table to center or right. The table’s align property has three possible values:

• left – places the table on the left margin. Again, this is the default alignment so it is not necessary to specify this if you want the table to be placed on the left margin)
• center – places the table in the center of the page
• right – places the table on the right margin

examples that show with the three alignment properties.

Example 1 – align=left places the table on the left margin.

Here is code

<table width="20" align="left" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>

Example 1 output

Example 2 – align=center places the table in the center of the page.

Here is Code

<table width="20" align="center" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>

Example 2 output

Example 3 – align=right places the table on the right-side of the page.

Here is Code

<table width="20" align="right" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>

Example 3 output

Controlling the placement of text within a table

By default, the horizontal alignment is left edge of a table’s cell and the vertical alignment is middle of a table’s cell. To understand that point, observe the following table:

To change the default horizontal alignment for a cell’s content, use the align property inside <td> tag with one of these possible values:

• left – aligns cell’s content to the left edge of the current cell. Again, this is the default alignment so it is not necessary to specify.)
• center – aligns cell’s content to the center edge of the current cell.
• right – aligns cell’s content to the right edge of the current cell.

You can also set the horizontal alignment for the entire row by placing the align property inside the <tr> tag (like <tr align=”center”>). This is more efficient to using individual align property for each cell when you have many cells that will use the same horizontal alignment value inside a row. You can always override a row’s horizontal alignment inside a particular cell (i.e., with <td align”center”>)

To change the default vertical alignment for a cell’s content, use the Valign property inside <td> tag with one of these possible values:

• middle – aligns cell’s content to the middle of the current cell. Again, this is the default alignment so it is not necessary to specify.)
• top – aligns cell’s content to the top of the current cell.
• bottom – aligns cell’s content to the bottom of the current cell.

The property Valign stands for vertical alignment. Just like you can set the horizontal alignment for the entire row, vertical alignment also can be set by using the Valign property inside the <tr> tag (like <tr valign=”top”>). Again, this is a better alternative to using individual valign properties for each cell when you have many cells that will use the same vertical alignment value inside a row. You can always override a row’s vertical alignment inside a particular cell (i.e., with <td align”bottom”>)

Note that if your table is too small or if you do not manually add a border around your table, you may not correctly determine which alignment your table is using. To check which horizental alignment your table is using, set the width property to a high number. For example, if you place an image (with dimension size 200 by 20) inside a cell, set the cell’s width to 250 (<td width=”250″>). Use the height property (like <td height=”250″>) to check which alignment you are using or to just add some extra blank space to a cell.

Showing below examples of different horizontal and vertical alignment values. HTML code for each example is also given.

different alignment combinations of align and valign properties with HTML code.

Horizontal alignment: left. Vertical alignment: top.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="top">
align=left <br>
valign=top
</td>
</tr>
</table>

Output

Horizontal alignment: left. Vertical alignment: middle.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="middle"> 
align=left <br>
valign=middle
</td>
</tr>
</table>

Output

Horizontal alignment: left. Vertical alignment: bottom.

HTML Code

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="bottom">
align=left <br>
valign=bottom
</td>
</tr>
</table>

Output

More Examples here below you can try by copying these html codes and check output

Spanning rows and columns

When you work with tables, it is sometimes necessary to combine one or two adjacent cells into one. The process of combining one or more adjacent cells into one is knows as spanning cell. If you span cells vertically down, it is known as a rowspan. If you span cells horizontally across, it is known as a colspan.

Read these below sub topics to know more:

Spanning rows: rowspan

To span cells vertically down, use the rowspan attribute with the <td> or <th> tag. The rowspan attribute expects a number equal to the number of cells you want to combine vertically into one column. Note that when you combines rows, rowspan includes the current cell. The easiest way to learn how to write the HTML code to create a rowspan is to first create the table with all cells. Of course, to keep your code simple to work with, you should not completely fill your table with data. Assume we want to create, the following table:

Notice the first column combines two cells. To create the above table, first create the complete table structure with the <table> tag, <tr> tag, and <td> tag:

<table width="520" border="1" cellpadding="2">
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Remember you have to fill the cells with some data before you can see the structure of the table on a web page. To create the rowspan in the first column, use the rowspan attribute in the <th> tag:

<th rowspan="2">

So by setting the rowspan to 2, we are extending down the first cell in the first column to the second cell in the second row. Because the first cell now will extend down to the second row, we need to adjust our cell tags in the second row. Specifically, we need to delete one of the <td> tags in the second row. So, now our code will look like:

<table width="520" border="1" cellpadding="2">
<tr>
<th rowspan="2"></th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Again, notice above the first row contains three cells while the second row contains only two. The second row needs only two <td> tags because one of the cells from the first row is occupying the first cell in the second row. Because now we have the appropriate table structure, we can fill our table with data:

<table width="520" border="1" cellpadding="2">
<tr>
<th rowspan="2">Span several cells</th>
<td>Rowspan</td>
<td>Combining at least two cells vertically.</td>
</tr>
<tr>
<td>Colspan</td>
<td>Combining at least two cells horizontally.</td>
</tr>
</table>

Spanning columns: colspan

To create a colspan, use the colspan attribute with <td> or <th> tag. As an example, assume we want to create the following table:

In the first row, we are spanning two columns. Again, to create a table that spans rows or columns, first create the table structure:

<table width="400" border="1" cellpadding="2">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Again, we need to span the first cell in the first row. To span the first cell, simply place the colspan attribute in the first cell:

<th colspan="2"></th>

Because now our first column will span to the second cell in first row, we need to adjust our row. That means we need to have only one <th> tag. The following shows the complete HTML code to create the above displayed table:

<table width="400" border="1" cellpadding="2">
<tr>
<th colspan="2">Spannning columns</th>
</tr>
<tr>
<td>Colspan</td>
<td>Combining at least two cells horizontally.</td>
</tr>
</table>

Using rowspan and colspan in a single cell

Some tables requires use of rowspan and colspan in a single cell. The following table shows an example:

In the second cell in the second row above, we are using colspan and rowspan. To create such table, simply first create the table structure:

<table width="200" border="1" cellpadding="2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Next, we need to determine where we place our colspan and rowspan attributes. If you look carefully at the above table, you will notice that the second cell in the second row expands horizontally to the third column and vertically to the third row. So that means we need to use colspan to expand the cell horizontally and rowspan to expand the cell vertically down. Thus our <td> tag will consist of:

<td colspan="2" rowspan="2"></td>

Recall that anytime we expand cells, we have to adjust the cells in our table. Because we are expanding our cell in the second cell and third row, we need to adjust the cells in the second and third row. Specifically, we have to take out one <td> tag from second row and two <td> tags from the third row:

<table width="200" border="1" cellpadding="2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>