HTML Table, How to Create One

Re-creating an HTML table

The table on the left is too narrow and crowded.  So, I decided to create a two-column HTML table and insert the data into the new columns.  This is how I did it.

By following along, you will learn how to make an HTML table with any number of columns you want.

vs 3 column tables

1. Copy the old HTML code

  • Go into your page in edit mode.
  • Look at it in text view and press Cmd A/Cmd C to copy all of the code into your clipboard.
  • Paste that code (Cmd V) into a new page that has been opened in text view.
  • Save the page with a descriptive name.

2. Code for simplest table

Before I go on, let’s talk about the HTML code for the simplest table.

At a minimum, you must understand the tags for the table itself, for the rows and for the data in each cell.  The tag for the beginning of a table is <table>.  So, the end tag is </table>.

Very simple HTML table codeThe tags for the rows are <tr> and </tr>.  The tags for the cell data are <td> and </td>.

Results from simple HTML tableThus, the code on the left would produce the data on the right.

HTML table 4 columnsTo produce a four-column table, all I would have to do is add a fourth set of data to the bottom of each row.

3. Insert table above old one

Go into your page in text view.  Insert the code below just above the old table code.

<table style=”width:100%”>

4. Add borders, etc.

The CSS blog post tells how to

  • Add borders to your tables and cells
  • Align your data vertically
  • Align your data within the cell horizontally
  • Add padding between data & borders

Make the changes now.

5. Move data to new table

Open your web page in visual view.  Move the data from your old table to your new table.


Leave a comment

Your email address will not be published. Required fields are marked *