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.

10,902 comments

  1. 내 여자친구를 키우다

    If you wish for to take a good deal from this piece of writing then you have
    to apply such methods to your won blog.

  2. promotional items

    If you are going for best contents like myself, just pay a quick visit this web page every
    day because it provides feature contents, thanks

  3. w88 slot

    What’s up, always i used to check blog posts here early in the break of day, for the reason that i like to find out more and more.

  4. 카지노

    Appreciation to my father who shared with me on the topic of this
    webpage, this blog is in fact awesome.

  5. online casino

    Excellent article. Keep writing such kind of information on your site.
    Im really impressed by your site.
    Hello there, You have performed a fantastic job.

    I will definitely digg it and for my part suggest to my friends.
    I am sure they will be benefited from this website.

  6. 우리카지노

    Greetings from Ohio! I’m bored to tears at work so I decided
    to browse your website on my iphone during lunch break. I enjoy the info you provide here and can’t wait to
    take a look when I get home. I’m amazed at how quick your blog loaded
    on my cell phone .. I’m not even using WIFI, just 3G ..
    Anyways, great site!

  7. Bwin

    Howdy, i read your blog occasionally and i own a similar one and i was just wondering if you get
    a lot of spam responses? If so how do you protect against it, any plugin or anything you
    can suggest? I get so much lately it’s driving me insane so any support is very much appreciated.

  8. Titanium earrings

    you are really a excellent webmaster. The website loading pace is amazing.
    It kind of feels that you are doing any distinctive trick.

    Moreover, The contents are masterpiece. you have done a magnificent task on this topic!

  9. honey face mask

    I need to to thank you for this wonderful read!!
    I definitely enjoyed every little bit of it.
    I have you saved as a favorite to check out new things you
    post…

  10. 카지노사이트

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

  11. 우리카지노

    I pay a visit day-to-day a few web pages and websites to read content, except this
    web site presents feature based posts.

  12. แทงบอล

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

  13. 더킹 카지노 주소

    Good day! I could have sworn I’ve been to this site before but after browsing
    through some of the post I realized it’s new to me. Anyways,
    I’m definitely glad I found it and I’ll be book-marking
    and checking back often!

  14. ky and the handle 근처 오락거리

    Appreciating the dedication you put into your site and in depth information you provide.
    It’s good to come across a blog every once in a while that isn’t the same outdated rehashed material.
    Fantastic read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  15. Titanium Trim

    I’m really enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much
    more pleasant for me to come here and visit more often. Did
    you hire out a developer to create your theme?
    Great work!

  16. brown palace tea

    Remarkable! Its really remarkable article, I have got much clear idea regarding from this post.

  17. hunte corporation jobs

    Very great post. I simply stumbled upon your weblog and wanted
    to mention that I’ve truly enjoyed surfing around your blog posts.
    In any case I will be subscribing for your rss feed and I hope you
    write once more very soon!

  18. 빈티지 빈티지 cam

    My brother recommended I might like this web site.

    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!

  19. 예스카지노

    You’ve made some good points there. I checked on the net for more info about the
    issue and found most people will go along with your views on this website.

  20. webcam masturbation

    Asking questions are genuinely pleasant thing if you are not understanding anything completely, except this paragraph offers pleasant understanding yet.

  21. シンフォギア スロット

    Hi, I do believe this is an excellent site. I stumbledupon it 😉 I may return once again since
    i have book marked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

  22. 3d printing ideas

    Hi there, just wanted to mention, I enjoyed this article.
    It was funny. Keep on posting!

  23. 인터넷바카라

    Hi, I read your blog like every week. Your writing style is awesome,
    keep up the good work!

  24. budgeting software

    This website was… how do you say it? Relevant!!

    Finally I’ve found something that helped me. Thanks!

  25. Game bài

    This is very fascinating, You are a very professional blogger.

    I have joined your feed and sit up for in quest of more of your wonderful post.

    Additionally, I’ve shared your web site in my social networks

  26. east asia

    I want to to thank you for this fantastic read!! I definitely loved every little bit of it.
    I have you bookmarked to look at new stuff you post…

  27. casino game

    Howdy! Someone in my Facebook group shared this website with us so I came to give it
    a look. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Excellent blog and fantastic design.

  28. 안전한 카지노 사이트

    These are really impressive ideas in regarding blogging.
    You have touched some fastidious things here. Any way keep up wrinting.

Leave a Reply

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