Adding tables to your website can help you with organizing your content. Before going through this lesson please first read our class on HTML Basics.
To add a table to your website, the basic HTML code is:
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
which would look like:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
To break it down, first we have the tags to start and close the table:
<table>
</table>
Now we will add the first row. A row is shown with a <tr> tag:
<table>
<tr>
Next, the cells will be added. A cell is shown with a <td> tag:
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
Finally we will close that row, and then start the next row:
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
You can repeat this to have as many rows and columns as you need.
In the example above we created a table with no borders, but you can create a table with borders as well. Using the above example:
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
All that needs to be added is in the first tag, the border attribute can be input:
<table border ="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Which would create:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
There are other attributes you can add to a table as well such as cellspacing and cellpadding to increase the space between the cells and around the table, but these are the basics to creating a table to your website.
Email: | support@WebHostingHub.com | Ticket: | Submit a Support Ticket |
---|---|---|---|
Call: | 757-416-6627 | Chat: | Click To Chat Now |
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!