How to Create an HTML Table

When you are creating web pages, you need to know how to add various types of data and elements, including tables. To create a web page with a table, follow these steps:

  1. Open your text editor.

  2. In the text editor, create a new text document.

    Most text editors will open with a blank or empty document to begin with. If you have anything in the document, clear it out before continuing.

    image0.jpg
  3. Enter the following HTML:

    <!doctype html>
    <html>
    <head>
    <title>My First Web Page</title>
    </head>
    <body>
    <h1>My Table</h1>
    <table>
        <tr>
            <th>Airport Code</th>
            <th>Common Name/City</th>
        </tr>
        <tr>
            <td>CWA</td>
            <td>Central Wisconsin Airport</td>
        </tr>
        <tr>
            <td>ORD</td>
            <td>Chicago O'Hare</td>
        </tr>
        <tr>
            <td>LHR</td>
            <td>London Heathrow</td>
        </tr>
    </table>
    </body>
    </html>
  4. Save the file as table.html.

    Save the file with a .html extension. The file should be saved in your document root.

    image1.jpg
  5. View the file in your browser.

    Open your web browser and type http://localhost/table.html into the address bar. Doing so will show a page like this one.

    image2.jpg

    Notice that the table doesn't have any borders around it. If you'd like to add borders, keep working through this exercise.

  6. Open table.html in your text editor.

    If you closed your text editor, open it again and load table.html.

  7. Change the code in table.html to the following:

    <!doctype html>
    <html>
    <head>
    <title>My First Web Page</title>
    </head>
    <body>
    <h1>My Table</h1>
    <table border="1">
        <tr>
            <th>Airport Code</th>
            <th>Common Name/City</th>
        </tr>
        <tr>
            <td>CWA</td>
            <td>Central Wisconsin Airport</td>
        </tr>
        <tr>
            <td>ORD</td>
            <td>Chicago O'Hare</td>
        </tr>
        <tr>
            <td>LHR</td>
            <td>London Heathrow</td>
        </tr>
    </table>
    </body>
    </html>

    Note that the only change is to add a space and then border="1" within the <table> element.

  8. Reload table.html in your browser.

    If you closed your browser, reopen it and go to http://localhost/table.html. If your browser is still open, press Ctrl+R to refresh the page (Command+R on a Mac). You now see a border around the table, as shown here.

    image3.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com