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

Coding Stuffs Web Development by dryanchristoph

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.

3,913 comments

  1. Designer Keto Pills

    Wow, wonderful blog format! How lengthy have you been blogging for?
    you make blogging look easy. The overall glance of your
    website is excellent, let alone the content material!

    Feel free to surf to my web page: Designer Keto Pills

    Reply
  2. Gerald

    Hey! This is kind of off topic but I need some guidance
    from an established blog. Is it very hard to set up your own blog?
    I’m not very techincal but I can figure things out pretty fast.
    I’m thinking about making my own but I’m not sure where to start.
    Do you have any ideas or suggestions? With thanks

    Reply
  3. Roma

    Thanks for finally talking about > HTML Table Make Your First
    Table – Dryan Christoph Personal Site < Loved it!

    Reply
  5. Estela

    Link exchange is nothing else except it is simply placing the
    other person’s webpage link on your page at suitable place and other person will also
    do similar for you.

    Reply
  6. Nick

    Hi there it’s me, I am also visiting this website daily, this web page is in fact pleasant
    and the visitors are in fact sharing fastidious thoughts.

    Reply
  8. Delphia

    Magnificent web site. A lot of useful info here.
    I’m sending it to some friends ans additionally sharing in delicious.
    And naturally, thank you in your sweat!

    Reply
  10. DivaTrim Keto Review

    Right here is the right site for anyone who wants to understand
    this topic. You realize so much its almost tough to argue with you (not that I actually will need to…HaHa).
    You certainly put a brand new spin on a topic that has been written about for decades.
    Excellent stuff, just excellent!

    Take a look at my web-site … DivaTrim Keto Review

    Reply
  11. [ПЕРЕЙТИ]

    Excellent blog right here! Also your web site lots up very
    fast! What host are you the use of? Can I am getting your associate link to
    your host? I desire my web site loaded up as quickly as yours lol

    Here is my website [ПЕРЕЙТИ]

    Reply
  14. http://pureketoextra.net/

    I carry on listening to the news update talk about getting free online grant applications so I have
    been looking around for the top site to get one.
    Could you tell me please, where could i acquire some?

    Take a look at my web-site http://pureketoextra.net/

    Reply
  15. X Pro Drone Review

    I like what you guys are usually up too. Such clever work and reporting!
    Keep up the very good works guys I’ve included you guys to my
    blogroll.

    Look at my site :: X Pro Drone Review

    Reply
  16. najlepsze strony porno

    I was recommended this website by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You’re wonderful! Thanks!

    Reply
  18. Derek Gaddis

    that will be the finish of this article. Right here you will come across some websites that we feel youll enjoy

    Reply
  19. miernik lakieru

    Hi there, You have done an excellent job. I?ll certainly digg it and personally recommend to my friends. I’m sure they’ll be benefited from this website.

    Reply
  21. Douglas Lansell

    hello there and thank you for your info ? I have definitely
    picked up anything new from right here. I did however expertise
    some technical points using this web site, since
    I experienced to reload the web site a lot of times previous to I could get it to load properly.
    I had been wondering if your hosting is OK? Not that I am complaining, but slow loading instances times
    will often affect your placement in google and
    can damage your quality score if advertising and marketing with Adwords.
    Anyway I’m adding this RSS to my email and can look out for a lot more of your
    respective intriguing content. Ensure that you update this again very soon.

    Feel free to visit my homepage: Douglas Lansell

    Reply
  23. http://Www.mostawrd.com/groups/slow-carb-and-slow-carb-recipes-to-feed-your-healthy-life-690923240/

    Unquestionably imagine that that you stated. Your favourite justification appeared to be on the internet the simplest thing to be aware of.
    I say to you, I definitely get irked whilst other folks think about worries that they just don’t recognise about.
    You managed to hit the nail upon the highest and also defined out the entire thing with no need side effect , people can take a signal.
    Will likely be back to get more. Thanks

    Here is my web site http://Www.mostawrd.com/groups/slow-carb-and-slow-carb-recipes-to-feed-your-healthy-life-690923240/

    Reply
  24. mobile games

    My brother suggested I might like this blog. He was entirely right. This post actually made my day. You cann’t imagine just how much time I had spent for this info! Thanks!

    Reply
  25. http://greenleafhealingcbd.net/

    I still cannot quite feel that I could be one of those reading through the
    important tips found on your web site. My family and I are seriously
    thankful for the generosity and for giving me the opportunity to
    pursue our chosen career path. Appreciate your sharing the
    important information I got from your website.

    Feel free to surf to my webpage – http://greenleafhealingcbd.net/

    Reply
  26. Green Leaf CBD

    Undeniably believe that which you stated. Your favorite reason seemed to be
    on the web the easiest thing to be aware of. I say to
    you, I certainly get annoyed while people think about worries that they plainly don’t know about.
    You managed to hit the nail upon the top and also defined out the whole thing without having
    side-effects , people can take a signal. Will probably
    be back to get more. Thanks

    Take a look at my blog: Green Leaf CBD

    Reply
  27. mobile games

    Appreciate it for helping out, excellent information.

    Reply
  29. Tyson Feliciano

    The very best artwork comes from the freshest flowers.

    Reply
  30. free robux

    Its fantastic as your other articles : D, thankyou for posting . “A single day is enough to make us a little larger.” by Paul Klee.

    Reply

Leave a Reply

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