CodesJava

Easy learning with example program codes

Table tags in HTML

HTML Table

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:

TAGUSES
<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.

 
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>

Output:




Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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>

Output:




Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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>

Output:





Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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%. 2px solid black border is also added to the table using the CSS border property.

Example 3: Using the CSS border-collapse property.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</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>

Output:





Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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%. 2px solid black border is also added to the table using the CSS border property. All the borders are than collapsed in one border by using the CSS border-collapse property.

Table with Cell Padding in HTML:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
th, td {
  padding: 10px;
}
</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>

Output:





Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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%. 2px solid black border is also added to the table using the CSS border property. A padding is than added of size 10px for each cell in the table.

Table with colspan in HTML:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
th, td {
  padding: 10px;  
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
  <tr>
    <th>NAME</th>
    <th colspan = "2">Marks</th> 
  </tr>
  <tr>
    <td>Tom</td>
    <td>100</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>80</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Bruno</td>
    <td>75</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>

Output:





Students Table

NAME Marks
Tom 100 20
Jerry 80 15
Bruno 75 10

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%. 2px solid black border is also added to the table using the CSS border property. A padding is than added of size 10px for each cell in the table. The cell span of the “Marks” column is than set to 2 columns using the colspan attribute.

Table with rowspan in HTML:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
th, td {
  padding: 10px;   
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
  <tr>
    <th>NAME</th>
    <td>Tom</td>
  </tr>
  <tr>
    <th rowspan="2">Marks</th>
    <td>100</td>
  </tr>
  <tr>
    <td>20</td>
  </tr>
</table>
</body>
</html>

Output:





Students Table

NAME Tom
Marks 100
20

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%. 1px solid black border is also added to the table using the CSS border property. A padding is than added of size 10px for each cell in the table. The cell span of the “Marks” column is than set to 2 rows using the rowspan attribute.

HTML table using Caption:
Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
th, td {
  padding: 10px;
}
</style>
</head>
<body>
<h3>Students Table</h3>
<table style="width:50%">
  <caption>Students Info</caption>
  <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>

Output:





Students Table

Students Info
NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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%. 2px solid black border is also added to the table using the CSS border property. A padding is than added of size 10px for each cell in the table. A caption to the table is also added using the caption tag.

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>

Output:





Students Table

NAME AGE CITY
Tom 10 London
Jerry 8 London
Bruno 12 Wells

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 than 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.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status