HTML tables

Basics

Tables organize data in columns and rows, like in a spreadsheet. Add or insert a table in a web page using HTML code to display data for visitors to view.

For example, consider the table below and how the information is organized.

The chart above was created with the following HTML 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 like what was explained above.
<td style="text-align:center">-</td> Like the earlier td except the content is centered.

The next six lines are like what was explained above.

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

Examples

Example 1

<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

The image above 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 image.

<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

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 more.

One way to post images and text right next to each other is to use a table. The source code below 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.

Example 4

<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

<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>