CSS TABLE STYLING

Here’s a simple and useful CSS table styling example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>22</td>
    <td>Abbottabad</td>
  </tr>
  <tr>
    <td>Ahmed</td>
    <td>25</td>
    <td>Islamabad</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

th {
  background-color: #3498db;
  color: white;
  padding: 12px;
  text-align: center;
}

td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

Important CSS table properties

Property	Purpose
border-collapse	Removes space between borders
border	Adds table/cell borders
padding	Adds space inside cells
text-align	Aligns text left/center/right
vertical-align	Aligns content vertically
background-color	Changes cell background
color	Changes text color
width	Controls table width
font-size	Changes text size
border-radius	Rounds corners
box-shadow	Adds shadow

Tip: For a modern table, combine border-collapse, padding, alternating row colors, and :hover effects.