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.

12,263 comments

  1. coin casino

    Genuinely when someone doesn’t be aware of then its up to other viewers that they will help,
    so here it happens.

  2. 솔레어카지노

    Thanks for sharing your thoughts about 007카지노. Regards

  3. 더나인카지노

    It’s going to be end of mine day, however before end I am reading this fantastic paragraph to improve my knowledge.

  4. Moe Amatsuka

    We absolutely love your blog and find the majority of your post’s to be just what I’m looking for.
    can you offer guest writers to write content for yourself?
    I wouldn’t mind composing a post or elaborating on a lot of the subjects you write in relation to here.
    Again, awesome web log!

  5. ceramic corner tile

    I’m amazed, I have to admit. Seldom do I encounter a blog that’s equally educative and interesting, and without a doubt,
    you have hit the nail on the head. The issue is something too few folks are speaking intelligently about.

    Now i’m very happy that I found this during my search for something
    concerning this.

  6. 섹시한 라틴어 milf solo

    Nice blog here! Also your web site a lot up fast! What web host are you the use of?
    Can I am getting your affiliate link for your host?
    I wish my site loaded up as fast as yours lol

  7. table games

    When I initially commented I appear to have clicked on the -Notify me when new comments are added-
    checkbox and from now on each time a comment is added
    I receive four emails with the same comment.
    There has to be an easy method you are able to remove me from
    that service? Cheers!

  8. roulette online

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

  9. 더나인카지노

    Attractive element of content. I just stumbled upon your website and in accession capital to claim that I acquire
    in fact loved account your weblog posts. Any way I will be subscribing to your feeds or even I fulfillment you get
    entry to consistently quickly.

  10. Payday loans

    Howdy would you mind sharing which blog platform
    you’re using? I’m going to start my own blog soon but I’m having a hard time selecting
    between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because
    your layout seems different then most blogs and I’m looking for something unique.
    P.S Apologies for being off-topic but I had to ask!

  11. online casino

    Heya! I just wanted to ask if you ever have any problems
    with hackers? My last blog (wordpress) was hacked and I
    ended up losing a few months of hard work due to no data backup.
    Do you have any methods to prevent hackers?

  12. カジノゲーム

    Just wish to say your article is as amazing. The clearness in your post is simply nice
    and i could assume you are an expert on this subject. Well with your permission let me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the gratifying
    work.

  13. betting

    A motivating discussion is definitely worth comment.

    There’s no doubt that that you ought to publish more
    about this subject, it may not be a taboo subject but usually people do not discuss these
    subjects. To the next! All the best!!

  14. 메리트카지노

    Hurrah, that’s what I was looking for, what a material! present here at this web site, thanks admin of
    this site.

  15. 佐々波綾

    This is a topic that is close to my heart… Cheers!
    Exactly where are your contact details though?

  16. โดจิน

    It’s perfect time to make some plans for the longer term and
    it is time to be happy. I’ve read this post
    and if I could I want to recommend you some fascinating things or suggestions.
    Maybe you could write next articles relating to this article.
    I want to learn even more things about it!

  17. カジノ ディーラー

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this fantastic blog!
    I guess for now i’ll settle for bookmarking and adding your
    RSS feed to my Google account. I look forward to brand new updates and will share this website with my Facebook
    group. Talk soon!

  18. bitters herbal medicine

    Superb, what a web site it is! This website
    provides useful information to us, keep it up.

  19. 1xbet

    Excellent blog here! Also your website loads up fast! What host are you using?

    Can I get your affiliate link to your host? I wish my website
    loaded up as quickly as yours lol

  20. 인터넷 바카라

    Magnificent items from you, man. I’ve bear in mind your stuff prior
    to and you are simply extremely fantastic. I really like what you have
    got here, really like what you are stating and the way in which wherein you
    say it. You are making it enjoyable and you still care for to keep it
    sensible. I cant wait to learn far more from you. That
    is really a great website.

  21. バカラ

    These are in fact enormous ideas in about blogging.
    You have touched some pleasant points here. Any way keep up wrinting.

  22. 더킹카지노

    No matter if some one searches for his vital thing, so he/she wishes to be available that in detail,
    so that thing is maintained over here.

Leave a Reply

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