How to Create a Table in HTML

PDF download Download Article
PDF download Download Article

This wikiHow 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

PDF download Download Article
  1. You'll typically use Notepad++ on Windows and TextEdit on Mac. To find these programs:
    • Windows - Open Start
      Windows Start
      , type notepad into Start, and click Notepad at the top of the window.
    • Mac - Open Spotlight
      Mac Spotlight
      , type in textedit , and click TextEdit below the Spotlight search field.
  2. 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
  3. This command indicates that you'll be creating a specific element of the table.
  4. 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. 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.
  6. This command indicates that all of the table's columns have been created and closes that section of the table's code.
  7. You'll now add your rows to your table.
  8. 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.
  9. 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.
  10. 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.
  11. Below the final line of the table, type in </table> . This indicates the end of the table.
  12. Your table should look something like this: [1]
    • <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>
  13. Press Ctrl + S (Windows) or ⌘ Command + S (Mac) to save your document, then enter a name for the document and click Save when prompted.
    14. Advertisement
Part 2
Part 2 of 2:

Adding Table Modifiers

PDF download Download Article
  1. 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 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. 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>
    4. Advertisement

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 wikiHow 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 wikiHow
    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 wikiHow 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 wikiHow
    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 wikiHow 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 wikiHow
    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
      Advertisement

      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
        Helpful 0 Not Helpful 1
      • 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
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      Advertisement

      You Might Also Like

      How to
      Make a Table
      How to
      Learn HTML
      How to
      Create a Simple Table in Microsoft Word
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Advertisement

      References

      1. ↑ https://www.w3schools.com/html/html_tables.asp

      About This Article

      Article Summary X

      1. Use the TABLE tag to start and end the table.
      2. Use the TR tag to open and close table rows.
      3. Use the TH tag to open and close column headers.
      4. Use the TD tag to open and close cell values.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 218,796 times.

      Is this article up to date?

      Advertisement