A great way to organize your content on your website is to use tables. If you have ever used a word processing program like MS Word or Open Office, tables offer the same style. Before completing this section make sure you have completed the course on Web Design Basics.

To add a table to your website, the basic HTML code will look like this:

<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 display on your webspage like this:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Creating a table with HTML?

So let's get a better understanding of the code, 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.

Adding a border to your HTML table

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 specified as border="1":

<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 display:

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, however this is meant to be an introduction to tables.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
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.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2259
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5713

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!