How to Build a Table in a Website

So, you want to learn how to build a table in a website? You need to learn a few HTML tags. The first tag is called the "table" tag, and it looks like this: <table>. This tells the browser that a table is to be drawn in the web page. You add rows and columns to the table by using the <tr> tag, which indicates a new row inside the table, and the <td> tag, which is used to indicate that data will be added to the table row.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Computer
• Basic understanding of HTML
• Web site or web page
• FTP server & client to upload your pages

How to Build a Table in a Wesbite

1. Locate the area in your HTML code on your website page where you want to build the table. Insert the <table> tag in this area.

2. Insert the <tr> tag after the <table> tag, this tells the browser that a new table row is being formed. Then insert the <td> tag to tell the browser that this row contains data (td stands for table data). It should look like this, <table><tr><td>

3. Enter the text, image or information you want contained in the table row after the <tr><td> tags. Your HTML will look like this, <table><tr><td> your text or image goes here. To end the row, use the </tr></td> tags.

4. You can add additional rows by using another set of <tr><td> tags, after the </tr></td> tags.

5. When you are finished building the table, insert the </table> tag. This tells the browser that the table is now "closed."

Tips & Warnings

• If you want to add multiple columns to your table, insert a <td> tag at the end of the text, or image, of the row, after the first <td> tag. This tells the browser that there is more information to be added to the table. It will automatically form another column.
• Adding </tr></td> tags, which tell the browser to end the row, is not always necessary. Some browsers automatically assume the first row is closed when another set of <tr><td> tags are used to declare a new row.
• When you add a row that has several columns (<td> tags), and a row that has only one column, you must use the <colspan> attribute to extend the table row across the columns. It will look like this...
• <table>
• <tr><td> Your text... more text... text...
• <td> Here's another column of text
• <td> Here's another column in this row
• </tr></td>
• <tr><td colspan="3">This is a single row that I want to expand across the three columns above, so I used <colspan="3"> inside the tag.
• </tr></td>
• </table>
• Tables can be confusing because browsers will interpret them differently. Become familiar with using <colspan> and <rowspan> attributes, to arrange your table cells as you want them to appear.
• Browsers will read </table> tags in confusing ways as well, so if you use a table inside of a table, or insert a <table> tag into your HTML before you close your first table, check each page in a different browser before you publish your page.

Resources

• A resource for developing tables in your website