How to Create an Expandable Table in HTML

Written by david koenig
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an Expandable Table in HTML
HTML code tells a browser how to display a table. (Comstock/Comstock/Getty Images)

Tables are a basic building block of Web pages in HTML, the code that allows text and images to render in a Web browser. You can manually set a precise width and height of rows, columns and cells in a table. To make an expandable table that automatically adjusts to fit your content, you simply create a basic HTML table without specifying dimensions.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Type the HTML tags <table> and </table> on two separate lines. Your remaining table code will be placed between these two tags.

  2. 2

    Type opening <tr> and closing </tr> tags for each row that you wish to display within the <table> tags.

  3. 3

    Type an opening <td> and closing </td> tag for each cell that you want to display within the <tr> tags. So, for a table with three rows and two cells per row, the HTML code will look like this:

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>

  4. 4

    Add cell content, such as text, between the opening and closing <td></td> tags. Your code may now look something like this:

    <table>

    <tr>

    <td>Your content goes here</td>

    <td>Your content goes here</td>

    </tr>

    <tr>

    <td>Your content goes here</td>

    <td>Your content goes here</td>

    </tr>

    <tr>

    <td>Your content goes here</td>

    <td>Your content goes here</td>

    </tr>

    </table>

    You now have a flexible table that will expand automatically to fit whatever content you insert.

Tips and warnings

  • To add borders to a table, code the opening tag like this: . You can replace the "1" with a higher value to make the border wider.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.