HTML TABLE STYLING | HTML STYLE

If you want to style an HTML table with CSS, here's a clean modern example:

<table class="styled-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>32</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>25</td>
      <td>Boston</td>
    </tr>
  </tbody>
</table>

.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.styled-table thead {
  background-color: #4CAF50;
  color: white;
}

.styled-table tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

.styled-table tbody tr:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

Features

• ✅ Full-width table
• ✅ Alternating row colors (zebra striping)
• ✅ Hover effect
• ✅ Modern shadow
• ✅ Clean header styling

For a responsive table on mobile:

.table-container {
  overflow-x: auto;
}

<div class="table-container">
  <!-- table here -->
</div>

If you have a specific table design in mind (Bootstrap style, dark theme, bordered, responsive, etc.), share your HTML and I can style it accordingly.