Create a Table in HTML
Constructing a table in HTML is rather tricky. But with the steps in this article, you'll be able to create one for your website.
Steps
- Open a simple text editing program such as either Notepad or WordPad on Windows, or, on a Mac open up TextEdit.
- Type all preceding HTML text that you want before the table.
- Define the use of a table to the HTML doc by typing the <table> tag and press ↵ Enter when finished.
- Type the table-row opening tag using the <tr> tag and press ↵ Enter when complete. Table elements from this point forward are created from left to right.
- Type the table header opening tag using the <th> tag.
- Type the name that you'd like to use for the first initial column.
- Type the closing tag for the table header item, using the </th> tag and press ↵ Enter.
- Repeat these steps (constructing the items in columns from left to right.
- Close that row off by typing the </tr> tag and press ↵ Enter when complete.
- Begin another row, with yet another <tr> tag, and press ↵ Enter when complete with that row.
- Type the table-data tag, using the <td> tag.
- Type the table-data you'd like to input into each field.Work left to right, when filling in the data from the columns specified above.
- Close each entry off with a </td> tag.
- Repeat for each table data entry that exists. For those cells that don't require any entry, type the <td> and <td> with nothing in between them. This should be more useful for cell in between two other cells.
- Close each row off with yet another </tr> tag.
- Repeat each row downwards from the addition of the <tr> and </td> lines until each row is assembled.
- Close off the table with the </table> tag.
- Type the proceeding HTML text that you want for the remainder of the document.
Tips
- Indent each line, so you later understand what you're trying to do in your code.
Warnings
- Table HTML code is best left up to advanced HTML coders. However, after you've followed these directions, you'll have become the start of one too.
- If you accidentally enter too many column entries of data where there is no table header, no, they will still be shown, but it will look rather silly, and the reader won't understand what the data is to.
- Constructing tables in an HTML page, is a rather tricky process to understand. Practice on external data first, to see how it will look, then preview it and place a new table in it's place instead.
Related Articles
- Define an Input Field in HTML
- Shim Text Around a Table in HTML
- Make a Table
- Learn HTML
- Create a Simple Table in Microsoft Word
- Make Userboxes Line Up Neatly
- Polish the Table for Your Website in HTML
Sources and Citations
- http://www.w3.org/TR/html4/struct/tables.html
- Creating a Web Site: The Missing Manual(Second Edition) by Matthew McDonald p. 233-235)