even odd table rows styling with CSS

tr:nth-child(odd) and tr:nth-child(even) are the CSS selectors responsible for selecting even and odd colors in table rows and columns. Starting right from first row of the table. Add any number of rows and style will be automatically adjusted.

Example

<!DOCTYPE html>
<head>
<title>CSS Styling Tables</title>
<style>
#evenOddTableStyle tr:nth-child(odd) {
	color:#000;
	background-color:#DFDFDF;
	padding:5px;
}
#evenOddTableStyle tr:nth-child(even) {
	color:#000;
	padding:5px;
}
</style>
</head>
<body>
<table id="evenOddTableStyle" width="90%">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>

Output :