Table HTML

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:5
  <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 5

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:5
  <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 5

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:5
  <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 5

Styling HTML tables: Even and Odd cells:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:10
}
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 10

Please follow and like us: