Tag: css table color

CSS Striped Tables

Please Share On:

Definition:

CSS striped property is used to change the row background color into striped format with even and odd rows. You can use a different color background striped. To select the color, visit “Standard Color Names“.

Syntax:

tr:nth-child(even){
background-color: cornsilk;
}

tr:nth-child(odd){
background-color: #f0f8ff;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(even){
background-color: cornsilk;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Table</h3>
 
<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped Table

CSS Striped Odd Rows: Source Code

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(odd){
background-color: cornsilk;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Table on Odd Rows</h3>
 
<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped on odd rows

CSS Striped Used on Even and Odd Rows Together

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(even){
background-color: cornsilk;
}

tr:nth-child(odd){
background-color: #f0f8ff;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Even and Odd Rows</h3>
 
<table>
  <tr>
    <th>S.No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Salman</td>
    <td>Khan</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sachin</td>
    <td>Tendugar</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped Even and Odd Rows

You may be interested in the following topics:

CSS Hoverable Tables

Please Share On:

Definition:

CSS hover changes the table row effect on mouse hover. You can set your own hover background-color. In the below example, I chose a beige color.

Syntax:

tr:hover {
background-color: beige;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
  text-align: right;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:hover {
background-color: beige;
}

</style>
</head>
<body>

<h3>Example of CSS Hoverable Tables</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

CSS hoverable on row 3

You may be interested in the following topics:

CSS Vertical Dividers

Please Share On:

Definition:

You need to add border-right property to table header <th> and table datas <td> to create vertical dividers. You can style your vertical dividers with your table requirement. To learn about different styles of border-right values, read border-style first.

Syntax:

 border-right: 5px dashed Magenta;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  text-align: left;
  border-right: 5px dashed Magenta;
  }

th, td {
  padding: 8px;
}
</style>
</head>
<body>

<h3>Example of CSS Horizontal Dividers</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Change the above code

 border-right: 5px dashed Magenta;

into

 border-right: 5px solid Red;

and see the output,

Vertical Solid Dividers

You may be interested in the following topics:

CSS Horizontal Dividers

Please Share On:

Definition:

You need to add border-bottom property to table header <th> and table data <td> to create horizontal dividers. You can style your horizontal dividers with your table requirement. To learn about different styles of border-bottom values, read border-style first.

Syntax:

border-bottom: 3px solid purple;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  text-align: left;
  border-bottom: 2px dotted red;
  }

th, td {
  padding: 8px;
}
</style>
</head>
<body>

<h3>Example of CSS Horizontal Dividers</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

horizontal dividers

Change the above code

border-bottom: 2px dotted red;

into

border-bottom: 2px solid red;

and see the output,

solid horizontal dividers

You may be interested in the following topics:

CSS Vertical Alignment

Please Share On:

Definition:

CSS vertical alignment is defined by text-align property with top, middle and bottom values.

By default, table header <th> and table data <td> contents are defined in middle.

Syntax:

vertical-align: top | middle | Bottom

Default Vertical Alignment Source Code:

This is the default vertical alignment property where the vertical-align property is not used. See the example below:

!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Top Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: top;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Middle Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: middle;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Bottom Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: bottom;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

You may be interested in the following topics:

CSS Horizontal Alignment

Please Share On:

Definition:

CSS horizontal alignment is defined by text-align property with left, center, and right values. Read the text-alignment chapter for more details about horizontal text-align.

By default, the table header is defined in a center alignment and table data are defined in a left alignment.

Syntax:

text-align: left | center | Right;

Default Horizontal Alignment Source Code:

This is the default text-align property where the text-align property is not used. See the example below:

!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Left Horizontal Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Left Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Center Horizontal Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Center Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Right Horizontal Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
  text-align: right;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Right Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

You may be interested in the following topics:

CSS Table Color

Please Share On:

Definition:

CSS table color property sets the color in a table row. To understand more about CSS color, please visit CSS Color first.

Syntax:

background-color: darkmagenta;
color: white;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  text-align: left;
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
background-color: cornsilk;
}

</style>
</head>
<body>

<h3>Example of CSS Table Color</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial