InMotion Hosting Support Center

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.

Support Center Login

Social Media Login

   
Social Login Joomla

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

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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

0 Questions & Comments

Post a comment

Back to first comment | top

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!