HTML કોમ્પ્લિકેટેડ ટેબલનો ઉપયોગ

HTML કોમ્પ્લિકેટેડ ટેબલનો ઉપયોગ કરવાની પ્રેક્ટિસ કરવા માટે, અહીં તમને 10 અલગ-અલગ ટેબલ નમૂનાઓ આપવામાં આવે છે. આ ટેબલોમાં colspan, rowspan, nested tables, હેડર સેલ્સ, અને CSS સ્ટાઇલિંગનો ઉપયોગ કરવામાં આવ્યો છે.

1. Simple Table with Colspan and Rowspan

<table border=”1″>
  <tr>
    <th colspan=”2″>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td rowspan=”2″>Rowspan Cell</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

2. Table with Nested Table

<table border=”1″>
  <tr>
    <td>Main Table Cell 1</td>
    <td>
      <table border=”1″>
        <tr>
          <td>Nested Cell 1</td>
          <td>Nested Cell 2</td>
        </tr>
        <tr>
          <td>Nested Cell 3</td>
          <td>Nested Cell 4</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Main Table Cell 2</td>
    <td>Main Table Cell 3</td>
  </tr>
</table>

3. Table with Header and Footer

<table border=”1″>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan=”3″>Table Footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

4. Complex Table with Colspan and Rowspan

<table border=”1″>
  <tr>
    <td rowspan=”2″>A</td>
    <td colspan=”2″>B</td>
    <td rowspan=”2″>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
    <td colspan=”3″>G</td>
  </tr>
</table>

5. Table with Styled Header

<table border=”1″>
  <thead>
    <tr>
      <th style=”background-color: lightblue;”>Header 1</th>
      <th style=”background-color: lightgreen;”>Header 2</th>
      <th style=”background-color: lightcoral;”>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

6. Table with Caption

<table border=”1″>
  <caption>Table Caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

7. Table with Merged Cells

<table border=”1″>
  <tr>
    <th colspan=”2″>Header 1</th>
    <th rowspan=”2″>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td colspan=”2″>Cell 4</td>
  </tr>
</table>

8. Table with Zebra Striping

<style>
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
<table border=”1″>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

9. Responsive Table using CSS

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  @media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
  }
</style>
<table border=”1″>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

10. Table with Multi-Level Headers

<table border=”1″>
  <thead>
    <tr>
      <th rowspan=”2″>Header 1</th>
      <th colspan=”2″>Group 1</th>
      <th rowspan=”2″>Header 4</th>
    </tr>
    <tr>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
  </tbody>
</table>

આ ઉદાહરણો તમને HTML ટેબલ્સના વિવિધ પાસાંઓને વધુ સારી રીતે સમજવામાં મદદ કરશે.