Creating a table on HTML

Creating a table

To create a table in HTML <table> tag is used. Each table begins with the <table> tag and ends with the </table> tag.Each row in a table  begins with the <tr> table row tag and  with the </tr> tag. Rows must be inside the table tag. The column contains cells, each of which begins with the <td> tag and ends with </td> tag. <td> tag must always be present inside the row tag. To specify the column heading we use the <th> tag that also ends with the </th> tag. It makes the text bold. We can also include a <caption< tag inside the table tag to specify the caption of the table.

Example-

Attributes of the <table> tag

The table tag has many attributes.

1.Border

This attribute draws a border around the table. It specifies the width of the border of the table.If border attribute is not specified with the table or its value is zero then over there will be displayed around the table. The larger the value, the thicker will be the border.

Ex- <table border= ”3”>

2.Bordercolor

The bordercolor attribute is used to set the colour of a table’s border.

Ex- <table border= ”3” color= ”red”>

3.Bgcolor 

The bgcolor attribute can be used to set the background colour of different parts of a table, whole table.

Ex- <table bgcolor= ”green”> Changes the background colour of the whole table.

<tr bgcolor= ”pink”> Changes the background colour of the whole table.

<td bgcolor= ”pink”> Changes the background colour of the cell.

<th bgcolor= ”pink”> Changes the background colour of the heading cell.

4.Align

The align attribute is used to specify the alignment of a table on a page. By default, a table is left aligned. The alignment can be set to left, center or right.

Ex- <table border= ”3” align= ”center” >

5.Cellpadding

This attribute sets the margin within a cell. It sets the amount of space in between the cell border and the cell data.It is measured in pixels.

Ex- <table border= ”3” bgcolor= ”yellow” cellpadding= ”10”>

6.Cellspacing

This attribute is used to set the minimum distance between two adjacent cells. Cellspacing is also measured in pixels.

Ex-  <table border= ”3” bgcolor= ”yellow” cellspacing= ”10”>

The default value for both CELLPADDING and CELLSPACING is 2.

7.Height and Width

With this attribute we can change the overall height and width of the table to get the desired size. You can specify the height or with either by specifying the size in absolute pixels or by specifying a relative percentage of the screen size.

Ex-<tr height= ”20%”> 

     <tr height= ”100”>

      <tr width= ”20%”> 

      <tr width= ”20%”> 

       <table height= ”20%”> 

      <table height= ”100”>

       <table width= ”20%”> 

       <table width= ”20%”> 

Attributes of the <tr>, <td>, and <th> Tags

1.Bordercolor and bgcolor

We can set the border colour and background colour for the cells of any specific row or column using the bordercolor and bgcolour attributes respectively of <tr> or <td> tags.

Ex-

2.Horizontal Alignment

Align attribute controls the text alignment within the cell either to the left, right or centre. the default alignment of the content of table cells is left and vertically  centered. if you want to change the alignment of cells it has to be done individually for each cell.

Ex-

<tr align= ”left”> Aligns the content to the left side of a cell (default)

 <tr align= ”right”> Aligns the content to the right side of a cell 

<tr align= ”center”> Aligns the content to the center side of a cell

Similarly, you can change alignment of a column also by using the < td> tag. 

3.Vertical Alignment- Valign

Valign attribute is used with the <td> tag and sets the vertical alignment of data in a column. The data can be set to top, middle, or bottom.

<td valign= “top”>  Aligns the content to the top of a cell

<td valign= “bottom”>  Aligns the content to the bottom of a cell

<td valign= “middle”>  Aligns the content to the middle of a cell

4.Spanning

You can combine two or more cells header column wise or row wise to convert them into a single cell. it is useful for displaying headings and titles in consecutive rows or column.