Horje
HTML Table Styling

HTML Table Styling means color, front size, etc... of Table

Use CSS to make your tables look better.

Full Example of HTML Table Styling

If you add a background color on every other table row, you will get a nice zebra stripes effect. Here we put a style calls ""zebra stripes effect" One by one rows colors use. To style every other table row element, use the :nth-child(even) selector like this:
index.html
Example: HTML 
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {
  background-color: #D6EEEE;
}
</style>
</head>
<body>

<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of HTML Table Styling



Category:
 Web Tutorial
Sub Category:
 HTML Table Styling
Uploaded by:
 Admin

Read Article
https://horje.com/learn/1434/reference

 

Horje