Web Development

HTML Tables

HTML Tables is the section 9 of Beginner’s Guide to HTML.

When you want to present a data set in a structured way, we use tables. Using tables we can present the data under rows and columns, so the reader will get a clear understanding about the data. HTML facilitates to build up tables in your content. These are the few commonly used elements to create tables.


tag defines a table.


tag defines a table row.

 tag defines the table body. It includes the rows of the table data for body.

 tag defines the table header. It includes the rows of the table header columns.


tag defines the table footer. It includes the rows of the table data for footer.


.
  • Wherever you put the
  • , it appears in the end of the table.
  • To have a border you can include the border attribute in the
  • tag defines a cell. It means table data.  The elements are the data containers in the table. It can contain all sorts of HTML elements like text, images, lists, other tables, etc.

    tag defines a table header column.


     tag defines a table caption.

    Let’s define a table to present a data set.

    [code language=”html”]

    My Movie List
    Movie Industry Watch Count
    Total Watched Times 18
    Day After Tomorrow Hollywood 5
    Talash Bollywood 2
    Don Bollywood 1
    3 Idiots Bollywood 6
    Titanic Hollywood 3
    Vettai Kollywood 1
    [/code]

    This is how it would looks like.
    HTML Table Image

    Did you identified the following facts in the above code.

    • All the text content in the
    becomes automatically bold and aligned centered. You can change them by using CSS or the align attributes. If you like to add a vertical header then the trick is to use a for a and not use a
    . Value of the border attribute can have 0 or 1. It means do you want border or no-border. default value is no-border which is 0. You can include borders by using CSS anyway.
  • To merge cells you can add the colspan attribute in a
  • element. See how the footer cells were merged to include “Total Watched Times”. Value of the colspan attribute means how many in-front cells needed to be merged with the cell. To merge rows you can do the same by using rowspan attribute.
  • Table caption is always centered to the table.
  • Following are the other few things that you can do with the attributes of the table. If you know CSS, then the same thing can be done using them. For your information the trend is becoming using the CSS to do the following. We’ll come on those with the CSS tutorial.

    Changing the width of the table. You can define the exact pixel size or give it as the percentage of the total page width size.

    [code language=”html”]
    [/code]

    Cell Padding. Sometimes it looks ugly when the text is so near to the borders. Padding your table can avoid it. Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding.

    [code language=”html”]
    [/code]

    Cell Spacing. If you think the cells are so near to each other, then using cellspacing attribute you can increase the space between the cells. 

    [code language=”html”]
    [/code]

    In this section we try to present a data set in more structured way using a table. Sometimes we use no-border tables to layout web pages. In the next section we’ll learn how to present a data list.

    WHAT’S NEXT?

    Present data lists with HTML Lists.

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW

    About the author

    Sandeep Likhar

    Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

    Leave a Reply

    Be the First to Comment!

    Notify of
    avatar
    wpDiscuz

    The Man Behind LetsDnD

    Sandeep Likhar

    Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

    © Copyright 2016 - Lets Design n Develop

    DON’T MISS OUT!
    Subscribe To Newsletter
    Be the first to get latest updates and exclusive content straight to your email inbox.
    Stay Updated
    Give it a try, you can unsubscribe anytime.

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW