HTML Tables: Here’s How To Make Your First Table

Short Explanation About HTML Table

  • A table is defined using the <table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.
  • Table cells which act as column headers or row headers should use the <th> (table header) element.
  • Table cells can be merged using the colspan and rowspan attributes.
  • Tables can be broken into sections using the following elements:
    • <thead> — Table header
    • <tbody> — Table body
    • <tfoot> — Table footer
  • A caption can be added to a table using the <caption> element.
  • You can use <col> and <colgroup> to define table columns for styling. However, there are a number of limitations with this practice.
  1. Table Code Sample: Simple Table

    Here is an example of a simple table. Copy this code into your editor and run it in your browser. If you haven’t got one, check my earlier post about Top 5 PHP Editor (IDE) for Web Developers.

    <table>
    	<tr>
    		<th>Name</th>
    		<th>Favorite Color</th>
    	</tr>
    	<tr>
    		<td>Bob</td>
    		<td>Yellow</td>
    	</tr>
    	<tr>
    		<td>Michelle</td>
    		<td>Purple</td>
    	</tr>
    </table>

  2. Table Code Sample: Complex Table

    <table>
      <caption>A complex table</caption>
      <thead>
        <tr>
          <th colspan="3">Invoice #123456789</th>
          <th>14 January 2025
        
        </tr>
        <tr>
          <td colspan="2"><strong>Pay to:</strong><br> Acme Billing Co.<br> 123
            Main St.<br> Cityville, NA 12345</td>
          <td colspan="2"><strong>Customer:</strong><br> John Smith<br> 321
            Willow Way<br> Southeast Northwestershire, MA 54321</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Name / Description</th>
          <th>Qty.</th>
          <th>@</th>
          <th>Cost</th>
        </tr>
        <tr>
          <td>Paperclips</td>
          <td>1000</td>
          <td>0.01</td>
          <td>10.00</td>
        </tr>
        <tr>
          <td>Staples (box)</td>
          <td>100</td>
          <td>1.00</td>
          <td>100.00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">Subtotal</th>
          <td>110.00</td>
        </tr>
        <tr>
          <th colspan="2">Tax</th>
          <td>8%</td>
          <td>8.80</td>
        </tr>
        <tr>
          <th colspan="3">Grand Total</th>
          <td>$ 118.80</td>
        </tr>
      </tfoot>
    </table>

What You Can Do Next

There is a CSS template to make a good styled HTML table very easily called Bootstrap. Simply load the bootstrap CSS in your HTML using <link> tag, and then use classes provided by bootstrap to style your table. For example, you can customize color, add striped rows to your table using one single parent class, nicely styled borderless table, hoverable rows, and many more. Try it yourself by reading Bootstrap documentation about tables here.

Keep in mind that example tables in this post is just static tables, meaning that the content inside the tables are hardcoded. When making a table in a site, commonly we must make the data dinamic. For example, the data is taken from database and the content keeps changing. I will explain this in the next post about how to make a dynamic table using PHP and HTML.

228 comments

  1. Aborcja na SĹ‚owacji

    I am not sure where you’re getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for fantastic information I was looking for this info for my mission.

  2. Blog kulinarny

    My brother suggested I might like this blog. He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this info! Thanks!

  3. Blog kulinarny

    It is the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you some interesting things or suggestions. Maybe you can write next articles referring to this article. I desire to read more things about it!

  4. miernik lakieru

    I think this is one of the most significant info for me. And i’m glad reading your article. But wanna remark on few general things, The site style is ideal, the articles is really great : D. Good job, cheers

  5. sex spotkania

    I like the valuable info you provide in your articles. I will bookmark your weblog and check again here frequently. I’m quite certain I?ll learn plenty of new stuff right here! Best of luck for the next!

  6. Blog kulinarny

    Hi, i think that i saw you visited my web site thus i came to ?return the favor?.I am trying to find things to improve my site!I suppose its ok to use a few of your ideas!!

  7. optyk ostrołęka

    It is appropriate time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you few interesting things or tips. Maybe you could write next articles referring to this article. I wish to read more things about it!

  8. miernik lakieru

    Wonderful goods from you, man. I’ve understand your stuff previous to and you’re just too wonderful. I actually like what you have acquired here, certainly like what you’re saying and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read far more from you. This is really a tremendous site.

  9. Roosevelt Floris

    Hey, thanks for a great post, it seems everyone these days is trying to make a little extra on the side but it is so hard to find really good blogs like yours. I’ve also been following this guy for a while and have had some success as a begginer using some of his methods. Maybe some of your readers might find it usefull too. http://www.affiliatemarketing101.com

  10. Blog kulinarny

    Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

Leave a Reply

Your email address will not be published. Required fields are marked *