Author:
Mark Sanchez
Date Of Creation:
28 January 2021
Update Date:
1 July 2024
![25: Table In HTML and CSS | How To Create Tables | Learn HTML and CSS | HTML Tutorial | CSS Tutorial](https://i.ytimg.com/vi/dK27jWKtJxs/hqdefault.jpg)
Content
It is quite difficult to create a table in HTML. But with the steps outlined in this article, you should be able to create one for your site.
Steps
1 Open a simple text editor program like Notepad or WordPad on Windows, or on Mac open TextEdit.
2 Enter all the text you want to see in front of the table.
- 3 Define the use of a table for an HTML document by entering the table> tag.
- 4 Hit Enter.
5 Enter the tag for opening row table using the tr> tag.
- 6Remember to build all the remaining elements from left to right.
7 Hit Enter.
8 Enter a start tag for the table heading using the th> tag.
9 Enter the title you want to use for the first column.
10 Enter a closing tag for the table heading element using the / th> tag.
11 Hit Enter.
12 Repeat steps (arranging items in columns from left to right).
13 Close this line by entering the / tr> tag.
14 Hit Enter.
15 Start another line with another tr> tag.
16 Hit Enter.
17 Enter the table data tag using the td> tag.
18 Enter the table data you want to include in each field.
- 19Work from left to right, filling in the data from the columns shown above.
20 Close each input with the / td> tag.
- 21 Repeat for all table data that you have.
- For cells where you don't need to enter anything, enter td> and td> and nothing in between. This will be very useful for fields between two other fields.
- For cells where you don't need to enter anything, enter td> and td> and nothing in between. This will be very useful for fields between two other fields.
22 Close each line with another / tr> tag.
23 Repeat each line down in addition to the tr> and / td> lines until each line is assembled.
24 Close the table with the / table> tag.
25 Enter the following HTML text as you need for the rest of the document.
Tips
- Indent from each line so that you can understand what you are trying to do in your code.
Warnings
- If you accidentally enter too many columns of data where there is no table heading, they will still be shown, but they will look a little silly and the reader will not understand what this information is for.
- Building tables on an HTML page is a tricky process to understand. First, practice on the external data to see what it looks like, then browse and place the new table in its place.
- The HTML table code is best left to advanced HTML coders. However, after you follow these instructions, you too will become one of them.