How to Create a Table in HTML

This How.com.vn teaches you how to create a basic information table using HTML, as well as how to add helpful elements such as borders to the table.

Part 1

Part 1 of 2:

Creating a Table

Download Article

1
Open a text-editing program. You'll typically use Notepad++ on Windows and TextEdit on Mac. To find these programs:
- Windows - Open Start
  , type notepad into Start, and click Notepad at the top of the window.
- Mac - Open Spotlight
  , type in textedit, and click TextEdit below the Spotlight search field.
2
Type in <table> and press ↵ Enter. The <table> tag indicates the start of a table, and pressing ↵ Enter prompts your text editor to start a new line.
- When using HTML, you always have to press ↵ Enter after creating a line of code to move onto the next line.
Advertisement
This command indicates that you'll be creating a specific element of the table.
4
Add a column to your table. Type in <th> to indicate a column, type in the label for the column, type in </th> to close the column, and press ↵ Enter.
- For example: to create a table column labeled "Number of Dogs", you would type <th>Number of Dogs</th> into your text editor.
5
Add more columns. Depending on how many columns you want your table to have, this step will vary. Once you've added all of the columns that you want to use, proceed to the next step.
- Columns are created from left to right.
This command indicates that all of the table's columns have been created and closes that section of the table's code.
You'll now add your rows to your table.
8
Add a cell to your table. Type in <td> to indicate a piece of information below the first column, type in the information, type in </td> to close the cell, and press ↵ Enter.
- For example: to create a cell with the number "23" in it, you would type <td>23</td> into your text editor.
The number of cells in a row should correlate to the number of columns; for example, if you have three columns, you should have three cells in a row. Once you've created an entire row, you can proceed.
Type in </tr> and press ↵ Enter to close the row. At this point, you can open another row by typing in <tr> and pressing ↵ Enter, adding individual cells, and then closing the row.
Below the final line of the table, type in </table>. This indicates the end of the table.
12
Review your table. Your table should look something like this:^{[1]XResearch source}
- <table>
- <tr>
- <th>Day</th>
- <th>Month</th>
- <th>Year</th>
- </tr>
- <tr>
- <td>4</td>
- <td>March</td>
- <td>1990</td>
- </tr>
- <tr>
- <td>27</td>
- <td>July</td>
- <td>1993</td>
- </tr>
- </table>
Press Ctrl+S (Windows) or ⌘ Command+S (Mac) to save your document, then enter a name for the document and click Save when prompted.

Part 2

Part 2 of 2:

Adding Table Modifiers

Download Article

1
Widen your table. Replace the <table> tag at the top of the sheet with <table and then type style="width:100%"> into the tag. Make sure that you keep a space between "table" and "style".
- The end result should look like this: <table style="width:100%">
- You can experiment with the percentage. For example, typing in 50 instead of 100 will result in a half-as-wide table.
2
Create borders for your table. Create a space at the very top of the document above the <table> tag, then do the following:
- Type in <style> and press ↵ Enter.
- Type in table, th, td { and press ↵ Enter.
- Type in border: 1px solid black; and press ↵ Enter.
- Type in border-collapse: collapse; and press ↵ Enter. Skip this line if you want your borders to have two lines instead of one.
- Type in } and press ↵ Enter.
- Type in </style> and press ↵ Enter.
3
Add a label for your table. Create a space just below the <table> tag, then do the following:
- Type in <caption>
- Type in the text that you want to use (e.g., Birthdays)
- Type in </caption> and press ↵ Enter.
  - Your end result should resemble this: <caption>Birthdays</caption>

Community Q&A

Search

Add New Question

Question
How do I put a border on the table?
Community Answer
You can go into the css for 'table' and change the border. It might look something like this:table {border: 1px solid #fff;}
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 15 Helpful 13
Question
How do I insert pictures into the table?
Community Answer
You can do that by adding a tag where the text would usually be.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 8 Helpful 8
Question
What will the table look when it is done?
Community Answer
It will look like a simple collection of boxes with black outlines with the text inside, much like a spreadsheet.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 2 Helpful 3

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Tips

To make certain text bold, you can place <b></b> tags around the text in question. For example, to turn "Number of Years" into "Number of Years", you'd type <b>Number of Years</b> into the text editor.
Thanks
Helpful0 Not Helpful1
It helps to indent related sections of code so that you can easily reference them later. For example, you might indent an entire section of cells.
Thanks
Helpful0 Not Helpful0