Tableタグ - HTML

sample

header header
data data
data data
header header header
data data data
data data data

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <table class="col2-width500">
    <thead>
      <tr>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table>
  <br>
  <br>
  <br>
  <br>
  <table class="col3-width800">
    <thead>
      <tr>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

style.css

table {
  border-collapse: separate;
}
table th {
  text-align: center;
  border-bottom: 1px solid black;
  padding: 2px 8px;
}
table td {
  border-bottom: 1px solid black;
  padding: 2px 8px;
}
tr:nth-of-type(odd) td{
  background-color: rgb(247, 247, 247);
}
.col2-width500 {
  width: 500px;
}
.col3-width800 {
  width: 800px;
}
.col3-width800 tr td{
  background-color: white;
}