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.
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>.
The tags for the rows are <tr> and </tr>. The tags for the cell data are <td> and </td>.
Thus, the code on the left would produce the data on the right.
To 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%”>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
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.