HTML Code

<!DOCTYPE html>



<html>



<head>



  <title>CSS Styled Table Example</title>



  <style>



    body {



      font-family: sans-serif;



      padding: 1.5rem;



      background: #f8fafc;



    }



    .data-table {



      border-collapse: collapse;



      width: 100%;



      max-width: 24rem;



      font-size: 0.875rem;



    }



    .data-table th,



    .data-table td {



      border: 1px solid #cbd5e1;



      padding: 0.65rem;



      text-align: left;



    }



    .data-table th {



      background: #1e293b;



      color: #fff;



    }



    .data-table tr:nth-child(even) td {



      background: #f8fafc;



    }



  </style>



</head>



<body>



  <h1>Styled Data Table</h1>



  <table class="data-table">



    <tr>



      <th>Name</th>



      <th>Score</th>



    </tr>



    <tr>



      <td>Alex</td>



      <td>92</td>



    </tr>



    <tr>



      <td>Sam</td>



      <td>88</td>



    </tr>



    <tr>



      <td>Jordan</td>



      <td>95</td>



    </tr>



  </table>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS border-collapse Property - Styled Data Table