HTML Table Styling Tag –

HTML TUTORIALS-

HTML Table Styling Tag –

Introduction-

HTML Table Styling Tag -

- Example Of HTML table with CSS styling, including borders, padding, colors, and hover effects:-

-)✅ Example 1: Basic Styled Table-👇

<style>
  table {
    border-collapse: collapse;
    width: 60%;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Pramod</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Madhu</td>
    <td>30</td>
  </tr>
</table>

✅ Example 2: Hover Effect and Alternating Row Colors-👇

<style>
  table {
    width: 70%;
    border-collapse: collapse;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #d1e7dd;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$10</td>
  </tr>
</table>

✅ Example 3: Rounded Corners and Shadows-👇

<style>
  table {
    width: 60%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 2px 2px 8px #aaa;
  }
  th, td {
    padding: 12px;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>HTML Basics Learning</td>
    <td>3 Weeks</td>
  </tr>
  <tr>
    <td>CSS Advanced Learningd</td>
    <td>4 Weeks</td>
  </tr>
</table>

🔍 Tag Breakdown-

-) Table Tag Breakdown -

May Be Like Important Link-

-Specify a valid MRP Procedure

-Movement type 161 is not allowed

-Specify a valid MRP Procedure

-Cash Journal Entry (PETTY CASH)