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.

5,697 comments

  1. Hellen

    Howdy are using WordPress for your site platform?

    I’m new to the blog world but I’m trying to get started and set up my own. Do you require any coding knowledge to make your own blog?
    Any help would be really appreciated!

  2. Clarissa

    Right here is the right blog for anybody who hopes
    to understand this topic. You understand a whole lot its almost tough
    to argue with you (not that I actually would
    want to…HaHa). You certainly put a fresh spin on a subject
    which has been written about for many years. Wonderful stuff, just wonderful!

  3. Atomic Shred Testo Booster

    Have you ever considered publishing an e-book or guest
    authoring on other websites? I have a blog based upon on the same ideas you discuss and would love
    to have you share some stories/information. I know
    my readers would value your work. If you are even remotely interested, feel free
    to send me an e-mail.

    Also visit my website – Atomic Shred Testo Booster

  4. Makayla

    Heya i am for the first time here. I came across this board and I find
    It truly useful & it helped me out a lot. I hope to give something back and help others like you helped me.

  5. Shonda

    Hey there! I simply would like to offer you a huge thumbs up for
    your great information you have here on this post.

    I’ll be returning to your blog for more soon.

  6. Lorenzo

    I used to be able to find good information from your blog posts.

  7. 안전놀이터

    In order to balance their quantity of action coming in – they adjust the odds to make the least bet much more eye-catching to
    wager on.

  8. Ketomentin

    Thanks for any other magnificent article. Where else may just anybody get that
    type of information in such an ideal approach of writing?
    I have a presentation subsequent week, and I am at the look for such information.

    Feel free to surf to my web site :: Ketomentin

  9. Ketomentin Pills

    Pretty section of content. I just stumbled
    upon your web site and in accession capital to assert that I acquire in fact enjoyed account your blog posts.
    Any way I will be subscribing to your feeds and even I achievement you access
    consistently fast.

    Here is my blog – Ketomentin Pills

  10. useful site electric repair company

    I was suggested this web site by way of my cousin. I’m not positive whether or not this submit is written by him as no one else realize such specific approximately my problem. You’re wonderful! Thank you!

  11. FastySlim

    Wohh just what I was looking for, thanks for posting.

    My blog … FastySlim

  12. thompson108.songmagroup.com/1.html

    If some one wants to be updated with most recent technologies then he must be pay a visit this web
    site and be up to date daily.

  13. Cora

    This post is invaluable. Where can I find out more?

  14. harris725.noithathomeplus.com/1.html

    It’s actually a nice and helpful piece of information. I’m happy that you
    shared this helpful information with us. Please keep us informed like this.
    Thank you for sharing.

  15. Exterior Painting

    Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say fantastic blog!

  16. Green Estates CBD Oil

    Thank you for your site post. Manley and I have
    already been saving to buy a new ebook on this subject and
    your article has made all of us to save all of our money.
    Your opinions really answered all our questions. In fact, in excess of what we had
    known before we ran into your great blog. My
    partner and i no longer have doubts including a troubled mind because you have attended to our own needs in this post.
    Thanks

    Have a look at my web blog; Green Estates CBD Oil

  17. 완벽한타인 토렌트

    great put up, very informative. I ponder why the opposite specialists of this sector don’t understand this.
    You should continue your writing. I am sure, you’ve a
    great readers’ base already!

  18. Streaming Hentai Online Free

    Hi there friends, how is all, and what you want to say about this article, in my
    view its truly remarkable in favor of me.

  19. Atomic Shred Testo Booster

    I’m not sure exactly why but this web site is loading extremely slow for
    me. Is anyone else having this issue or is it a issue on my end?
    I’ll check back later and see if the problem still exists.

    My webpage … Atomic Shred Testo Booster

  20. sports betting champ

    It all comes down to the person matchups and locating the most
    value for your wagers so you are profitable in the long run.

Leave a Reply

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