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 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.
|Total Watched Times||18|
|Day After Tomorrow||Hollywood||5|
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 .
- Wherever you put the
, it appears in the end of the table.
- To have a border you can include the border attribute in the
. 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”]
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”]
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”]
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.
Present data lists with HTML Lists.
- Wherever you put the