CodesJava

Easy learning with example program codes

CSS Table

To display a group of data in a tabular form 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. Several CSS properties can be used to apply a style to an HTML table, thus providing a better look and feel. Some of these CSS properties are:

  • border
  • border-collapse
  • padding
  • width
  • height
  • text-align
  • color
  • background-color

CSS Table Border:

The CSS border property can be used to set a border for an HTML table.

Example:

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

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.

CSS Table Border Collapse:

The CSS border-collapse property can be used to collapse all the borders of the table in one border only.

Example:

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

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.

CSS Table Padding:

The CSS padding property can be used to define padding for the table header and table data.

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:

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.

CSS Table: Styling even and odd cells:

We can style even and odd table cells to display different background colors on even and odd cells of an HTML table using CSS.

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:

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 CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status