HTML tables

Beginners HTML Beginners Plus HTML CSS Style Sheets <table> tag <div> tag
HTML Links Free Web Templates

Tables

Tables are used in HTML to organise the content that is shown to the end user. This could be from showing figures that would normally be shown in a spreadsheet too organising images to be shown in columns and rows. The concept used in tables is that you can have multiple columns and rows all belonging to the same table.

Every table starts with the <table> tag.

Every row in the table starts with the <tr> tag.

Every column (cell) in the table starts with the <td> tag.

Remember the cell tag <td> is where you want to put your data or image etc.

So a simple table with just 1 cell would look like the following (see in blue below). Where border="1" allows a border of 1px around the cell. The colour of the border will be black by default.

<table border="1">
  <tr>
     <td>Hello</td>
  </tr>
</table>

You could Copy and Paste this code into notepad etc and save the file as table.html See below for how it should look.

Hello

Now see in blue below how to generate 2 cells. Which in fact is 1 row and 2 columns.

<table border="1">
  <tr>
     <td>Hello</td>
     <td>World</td>
  </tr>
</table>

Below is how it should look.

Hello

World

See below in blue how to generate 2 rows and 3 columns and also we will use the style variable. Dont worry about this extra variable you can learn more about styles later on.

<table style="border:1px solid black">
  <tr>
     <td>Hello</td>
     <td>World</td>
     <td>Once</td>
  </tr>
  <tr>
     <td>Hello</td>
     <td>World</td>
     <td>Twice</td>
  </tr>
</table>

See below how it should look.

Hello	World	Once
Hello	World	Twice

You can practice to use this html code to create mulitple rows and columns of your own. Inserting your own data etc.