Table HTML

by

HTML <table> Tag

To display a group of data in a tabular form the HTML <table> Tag is used. To serve this purpose the HTML <table> element is used, with <tr> tag to define the table row, <th> tag to define the table header, and the <td> tag to define the table data. However, to manage the layout of the page like the header section and the footer section, the use of <div> tag over the <table> element is recommended.

HTML Table Tags:

TAG USES
<table> To define a table.
<tr> To define a row in a table.
<th> To define a header cell in a table.
<td> To define a cell in a table.
<caption> To define the table caption.
<colgroup> To specify a group of one or more columns in a table for formatting.
<col> To specify column properties for each column. Used with the <colgroup> element.
<tbody> To group the body content in a table.
<thead> To group the header content in a table.
<tfooter> To group the footer content in a table.

Tag specific Attributes:

Attribute Value Uses HTML 5
align left

center

right

 Used to define the table alignment relative to the surrounding text. Not supported in HTML5.
bgcolor rgb(x,x,x)

#xxxxxx

colorname

 Used to define the background color of a table. Not supported in HTML5.
border 1

0

 Used to determine whether or not the table is being used to serve the layout-related features. Not supported in HTML5.
cellpadding pixels Used to define the gap between the cell wall and the cell content. Not supported in HTML5.
cellspacing pixels Used to define the gap between two cells. Not supported in HTML5.
frame void

above

below

hsides

lhs

rhs

vsides

box

border

 Used to define the visible parts of the outside borders. Not supported in HTML5.
rules none

groups

rows

cols

all

 Used to define the visible parts of the inside borders. Not supported in HTML5.
summary text Used to define the content summary of a table. Not supported in HTML5.
width pixels

Used to define the width of a table.

 Not supported in HTML5.

Global Attributes:

The HTML Global attributes are supported by the HTML <table> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <table> tag.

Supporting Browser:

Chrome, IE, Firefox, Opera, and Safari.

Table with defined Width in HTML:

Example:

<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%">
  <tr>
    <th>NAME</th>
    <th>AGE</th> 
    <th>CITY</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>10</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>8</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Bruno</td>
    <td>12</td>
    <td>Wells</td>
  </tr>
</table>
</body>
</html>

Explanation:

In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. There are three rows, where each row is defined by the <tr> tag, and the data in each row for each column is defined by the <td> tag. Here, the width of the table is also defined to be 50%.

HTML Table with Border

Example 1: Using the border attribute of the HTML table.

<!DOCTYPE html>
<html>
<body>
<h3>Students Table</h3>
<table style="width:50%" border="2">
  <tr>
    <th>NAME</th>
    <th>AGE</th> 
    <th>CITY</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>10</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>8</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Bruno</td>
    <td>12</td>
    <td>Wells</td>
  </tr>
</table>
</body>
</html>

Explanation:

In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 50%. A border is added to the table of size 2 pixels using the border attribute of the HTML table.

Example 2: Using the CSS border property.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
  <tr>
    <th>NAME</th>
    <th>AGE</th> 
    <th>CITY</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>10</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>8</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Bruno</td>
    <td>12</td>
    <td>Wells</td>
  </tr>
</table>
</body>
</html>

Explanation:

In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 50%. A 2px solid black border is also added to the table using the CSS border property.

Styling HTML tables: Even and Odd cells:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;
}
table#t1 tr:nth-child(even) {
  background-color: crimson;
  color: white;
}
table#t1 tr:nth-child(odd) {
 background-color: wheat;
}
table#t1 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table id="t1">
  <tr>
     <th>NAME</th>
    <th>AGE</th> 
    <th>CITY</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>10</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>8</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Bruno</td>
    <td>12</td>
    <td>Wells</td>
  </tr>
</table>
</body>
</html>

Explanation:

In the above example, a table is created with three header cells namely, “NAME,” “AGE”, and “CITY”. Here, the width of the table is also defined to be 100%. 1px solid black border is also added to the table using the CSS border property. A padding is then added of size 10px for each cell in the table. In this example, we are adding a special style to the table with the id “t1”. A crimson background color and a white text color is added to the even rows, while a wheat background color is added to the odd rows. Again the style is differently defined for the header row with a black background color and a white text color.