We all are familiar with the concept of tables with rows and columns. But how would you create a table in a website? HTML table tag family displays a table in a webpage. It’s similar like the structure of a matrix with proper rows and columns. This type of structure with rows and columns is very helpful in representing data in an organized manner. The tabular form of data creates a good impression on user.
Today we will learn about all HTML table tags that will help you to create a table for your data.
Lets see the first example of how to use HTML table tags. Just observe the example for now; we have explained each tag one by one after the example.
row is defined by
<tr> tag. It is a paired tag with
</tr> as a closing tag. Whatever written between these tags will be displayed in a single row of the table.
To create a new row, add another
<tr> tag after closing the previous one.
HTML table header is a special case of a table row. It starts with
<th> tag and ends with
</th> tag. The difference between a row and a heading is that text written inside
<th> tags is displayed in bold font, and centered aligned by the browser. Because of its properties this tag is used only for writing headings in the table.
HTML table cell is defined by
<td> tag. It is a paired tag with
</td> as a closing tag. Each pair of these tags represents a cell in a row.
It can only be used inside
&glt;tr> or <td> tags. After declaring rows, the
<td> tags are used to enter data in the table. Whatever is written inside the
</td> tags will be displayed by the browser in the tables as it is.
The <table> Tag in HTML has many attributes that define the structure of the table. These attributes can make a table look a bit more attractive. Let’s see one by one the different attributes of the table tag and then we will use them in an example and will see the changes in the table.
HTML table border attribute is used to specify borders in a table. It means that, by default the borders in the table are hidden and if you don’t specify borders then your table will only display data but there would be no border.
The table border attribute has two values 0 and 1. 0 means no border and 1 means visible borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the border.
There are two ways to specify border for HTML tables:
border attribute of table in HTML.
Look at the example below to define an HTML border with border attribute:
height attributes are used to resize the table.
You can use CSS stylesheet to make table borders more attractive. Try changing border colors in the try-it editor.
"Cellspacing" attributes are used to adjust the padding and margins in within table cells.
The Cellpadding attribute is used to specify the space between the content of the cell and its borders. It provides padding to the content in the cell.
As you increase the value, the space between the cell’s content and its border also increases. The default value of cellpadding is taken in pixels by browsers. The cellpadding is applied to all the four sides of the content. The value can also be defined in percentages.
The Cellspacing attribute is used to specify the space between the cells of the table. Its value can be in pixels or in percentages. It is applied to all the sides of the cells.
Note: These two attributes are no longer a part of HTML 5. So, it is better to use CSS to color the tables.
cellpadding="5" cellspacing="5" style="width:100%">
HTML table colspan and rowspan attributes are used with the <td> tag. As the name suggests ‘colspan’ is related to columns and ‘rowspan’ is related to rows.
These two attributes are used to merge two or more columns or rows. Table colspan attribute’s value suggest the amount of column space it will occupy. For example ‘<td colspan= 2>’ will create a cell taking space of two cells horizontally i.e. it will occupy the space of a cell of the next column.
Similarly, Table rowspan will create a cell which will occupy the space of two or more (as specified) cells vertically, i.e. cells of the next rows. Look at the example below to understand the concept clearly.
rowspan attribute is used to merge two or more rows together to form a single row. A single row occupies space of the number of merged rows. Look at the example:
colspan attribute is used to merge two or more columns into a single column. Single column occupies space of the number of merged columns. Look at the example:
colspan="2"> Mobile </th>
HTML table caption attribute defines a caption to the table. It gets displayed with table as its name. To add a caption to a table, use the
align attribute with values - left/right/top/bottom.
HTML table bgcolor attribute is used to provide a background color to the table. You can easily write any color name directly or you can also set a color by providing HEX code. This attribute can also be used with <td> tag to define the color of that particular cell in the table.
HTML table background attribute is used to add a background image in the table. The image in the table will work as a background behind the data in the table. It can be used with <td> tag.