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.

    Written by Sandeep Likhar

    Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

    Leave a Reply

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

    Back to Top