HTML tables

Updated: 06/02/2020 by Computer Hope

Basics

Tables organize data in columns and rows, like in a spreadsheet. For example, consider how the information in the table below is organized:

HITS MONTH TOTAL INCREASE
324,497 January 1998 -
436,699 February 1998 112,172

The above chart was created with the following source code.

<table style="border:1px solid black">
 <tr>
  <td><b>HITS</b></td>
  <td><b>MONTH</b></td>
  <td><b>TOTAL INCREASE</b></td>
 </tr>
 <tr>
  <td>324,497</td>
  <td>January 1998 </td>
  <td style="text-align:center">-</td>
 </tr>
  <tr>
  <td>436,699</td>
  <td>February 1998</td>
  <td style="text-align:center">112,172</td>
 </tr>
</table>

What does it all mean?

<table style="border:1px solid black"> Size of the border (1 pixel), line style (solid), and color (black).
<tr> Start the first row.
<td><b>HITS</b></td> The <td> statement is to start the first column and </td> is to end the first column. The b statement is making the text bold. The same applies for the next two lines.
</tr> Ends the first row.
The next three lines are similar to what was explained above.
<td style="text-align:"center">-</td> Similar to the earlier td except the content is centered.

The next six lines are similar to what was explained above.

</table>
Ends the table without transforming the remainder of the document into the table.

Examples

Example 1

1 2 3
4 5 6
7 8 9
<table>
 <tr>
  <td style="background-color:#FFFF00">1</td>
  <td style="background-color:#00FF00">2</td>
  <td style="background-color:#00FFFF">3</td>
 </tr>
 <tr>
  <td style="background-color:#FF00FF">4</td>
  <td style="background-color:#FF0000">5</td>
  <td style="background-color:#0000FF">6</td>
 </tr>
 <tr>
  <td style="background-color:#008080">7</td>
  <td style="background-color:#FFFF00">8</td>
  <td style="background-color:#00FFFF">9</td>
 </tr>
</table>

<table border="0" This statement tells the browser that it does not want a border by declaring border="0".
<td style="background-color:#FFFF00">1 </td> Td is declaring a new cell, as explained in basics. The style="background-color:#FFFF00" is telling the browser what color to display the cell as; #FFFF00 would be yellow; you also could write in yellow. For more on colors, view our color codes page.

Example 2

CH Guy left Computer Hope CH Guy right

The above image is three different images put in a table that is at 100% of the section of the screen. Below is the source code used for the above example.

<table border="0" style="width:100%">
 <tr>
  <td>
   <img src="https://www.computerhope.com/">
  </td>
  <td style="text-align:center">
   <img src="https://www.computerhope.com/can/ComputerHope-hope.jpg">
  </td>
  <td style="text-align:right">
   <img src="https://www.computerhope.com/">
  </td>
 </tr>
</table>

<table border="0" style="width:100%"> The most important part of the above is the first line with style="width:100%" attribute. The style indicates the table needs to be 100% of the open screen or container.

Example 3

CH Guy

Welcome to Computer Hope, one of the most advanced free websites on the Internet, helping you with all your computer-related issues. Helping you with such topics as HTML, where we give examples, source code, enhancements, tips, and much more.

One way to post images and text right next to each other is to use a table. The below source code shows how we did the above. We condensed our statement to make it look less intimidating.

<table border="0">
 <tr>
  <td><img src="chguy.gif"></td>
  <td style="vertical-align:top">STATEMENT SHOWN ABOVE</td>
 </tr>
</table>

The style="vertical-align:top" tells the browser to align the starting of the text at the top of the image. The vertical-align property can also be one of: middle, bottom, text-top, text-bottom, baseline, sub, super, and several others.

Note

Although this can be done with a table, we recommend using CSS, see: How to create images that are right-aligned on a web page.

Example 4

Computer Hope
<table style="border:10px solid gray">
 <tr>
  <td><a href="https://www.computerhope.com/">Computer Hope</a></td>
 </tr>
</table>

<table style="border:10px solid gray"> This simple outline effect is created by specifying the style border:"10px solid gray". The border is ten pixels wide, and colored gray.

Example 5

WEB PAGE

DESCRIPTION

HITS

MONTH

Computer Hope Main page linking to all pages 3912 Feb 98
Cool Tricks HTML cool tricks 2514 Feb 98
<table border="0">
 <tr>
  <td style="background-color:#0000FF"><b>WEB PAGE</b></td>
  <td style="background-color:#0000FF"><b>DESCRIPTION</b></td>
  <td style="background-color:#0000FF"><b>HITS</b></td>
  <td style="background-color:#0000FF"><b>MONTH</b></td>
 </tr>
 <tr>
  <td style="background-color:#00FFFF"><a href="https://www.computerhope.com/">ComputerHope</a></td>
  <td style="background-color:#00FFFF">Main page linking to all pages</td>
  <td style="background-color:#00FFFF"><b>3912</b></td>
  <td style="background-color:#00FFFF">Feb 98</td>
 </tr>
 <tr>
  <td style="background-color:#00FFFF"><a href="https://www.computerhope.com/cooltrik.htm">Cool Tricks</a></td>
  <td style="background-color:#00FFFF">HTML cool tricks</td>
  <td style="background-color:#00FFFF"><b>2514</b></td>
  <td style="background-color:#00FFFF">Feb 98</td>
 </tr>
</table>