HTML tables

Updated: 05/21/2018 by Computer Hope

Basics

Tables are used to 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; in this case, #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 tells the browser that the table needs to be 100% of the open screen or contained regardless of the size or resolution of the visitors screen.

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. Helping you with hardware questions with hundreds of technical pages of useful information with such hardware as printers, scanners, sound cards, modems, CD-ROM, and much more. Helping you with software questions with such applications as DOS, Windows 95, Windows 3.x, Unix, Adobe Photoshop, and more. Helping you with games, providing cheats for tons of games, complete breakthroughs, providing step by step instructions on conquering your favorite game, game news, and a lot more. Over 10,000+ pages of free, frequently updated information at your fingertips and all thanks to Computer Hope.

This question is asked frequently where someone wants to post images and text right next to each other, to have the appearance of a news paper. 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 most important line of this code, 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

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>     

Additional information

  • See our table definition for further information and related links on this term.