HTML టేబుల్స్ (table), రోస్, కాలమ్స్, colspan, rowspan & Accessibility గైడ్

<!DOCTYPE html>
<html lang="te">
<head>
  <meta charset="UTF-8">
  <title>నా మొదటి టేబుల్</title>
  <style>
    table, th, td {
      border: 1px solid #cbd5e1;
      border-collapse: collapse; /* రెండు బోర్డర్ల మధ్య ఖాళీని తొలగిస్తుంది */
      padding: 10px 14px;
    }
    th {
      background-color: #f1f5f9;
      color: #0f172a;
    }
  </style>
</head>
<body>

  <table>
    <tr>
      <th>విద్యార్థి పేరు</th>
      <th>సబ్జెక్ట్</th>
      <th>మార్కులు</th>
    </tr>
    <tr>
      <td>రాహుల్</td>
      <td>వెబ్ టెక్నాలజీస్</td>
      <td>95</td>
    </tr>
    <tr>
      <td>స్నేహ</td>
      <td>వెబ్ టెక్నాలజీస్</td>
      <td>98</td>
    </tr>
  </table>

</body>
</html>

<table style="width: 100%; border-collapse: collapse;">
  <thead style="background-color: #10b981; color: white;">
    <tr>
      <th style="padding: 10px; text-align: left;">వస్తువు</th>
      <th style="padding: 10px; text-align: center;">పరిమాణం (Qty)</th>
      <th style="padding: 10px; text-align: right;">ధర (₹)</th>
    </tr>
  </thead>

  <tbody style="background-color: #f8fafc;">
    <tr>
      <td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0;">లాప్‌టాప్ బ్యాగ్</td>
      <td style="padding: 8px 10px; text-align: center; border-bottom: 1px solid #e2e8f0;">1</td>
      <td style="padding: 8px 10px; text-align: right; border-bottom: 1px solid #e2e8f0;">1,200.00</td>
    </tr>
    <tr>
      <td style="padding: 8px 10px; border-bottom: 1px solid #e2e8f0;">వైర్‌లెస్ మౌస్</td>
      <td style="padding: 8px 10px; text-align: center; border-bottom: 1px solid #e2e8f0;">2</td>
      <td style="padding: 8px 10px; text-align: right; border-bottom: 1px solid #e2e8f0;">900.00</td>
    </tr>
  </tbody>

  <tfoot style="background-color: #e2e8f0; font-weight: bold;">
    <tr>
      <td style="padding: 10px;">మొత్తం చెల్లించవలసినది</td>
      <td style="padding: 10px; text-align: center;">3 వస్తువులు</td>
      <td style="padding: 10px; text-align: right; color: #059669;">₹ 2,100.00</td>
    </tr>
  </tfoot>
</table>

<table border="1" style="border-collapse: collapse; width: 100%; text-align: center;">
  <tr>
    <th>ఉద్యోగి పేరు</th>
    <th colspan="2">సంప్రదించవలసిన ఫోన్ నంబర్లు</th> <!-- 2 కాలమ్స్ కలిసాయి -->
  </tr>
  <tr>
    <td>సురేష్ కుమార్</td>
    <td>9876543210 (వ్యక్తిగత)</td>
    <td>040-123456 (ఆఫీస్)</td>
  </tr>
</table>

<table border="1" style="border-collapse: collapse; width: 100%; text-align: left;">
  <tr style="background:#f1f5f9;">
    <th>విభాగం (Department)</th>
    <th>ఉద్యోగి పేరు</th>
    <th>హోదా (Designation)</th>
  </tr>
  <tr>
    <!-- ఈ సెల్ క్రింది వరుసను కూడా కలిపేసుకుంటుంది -->
    <td rowspan="2" style="background:#f8fafc; font-weight:bold;">ఇంజనీరింగ్ (Engineering)</td>
    <td>ఆనంద్ రావు</td>
    <td>Tech Lead</td>
  </tr>
  <tr>
    <!-- ఇక్కడ డిపార్ట్‌మెంట్ td రాయకూడదు! నేరుగా పేరుతో మొదలుపెట్టాలి -->
    <td>భవ్య రెడ్డి</td>
    <td>Frontend Developer</td>
  </tr>
</table>

<table border="1" style="border-collapse: collapse; width: 100%; text-align: center;">
  <caption style="font-weight: bold; margin-bottom: 8px;">కంప్యూటర్ సైన్స్ 3వ సంవత్సరం టైమ్‌టేబుల్</caption>
  <thead style="background: #10b981; color: white;">
    <tr>
      <th>రోజు</th>
      <th>పీరియడ్ 1 (9-10)</th>
      <th>పీరియడ్ 2 (10-11)</th>
      <th>విరామం (11-11:30)</th>
      <th>పీరియడ్ 3 (11:30-1)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="font-weight: bold;">సోమవారం</td>
      <td>HTML5</td>
      <td>CSS3</td>
      <!-- rowspan="2" తో 2 రోజులకు ఒకే బ్రేక్ బాక్స్ -->
      <td rowspan="2" style="background: #fef08a; font-weight: bold;">లంచ్ & టీ బ్రేక్</td>
      <td>జావా ల్యాబ్</td>
    </tr>
    <tr>
      <td style="font-weight: bold;">మంగళవారం</td>
      <!-- colspan="2" తో 2 పీరియడ్లు ల్యాబ్ కోసం మెర్జ్ -->
      <td colspan="2" style="background: #e0f2fe;">పైథాన్ ఫుల్ ప్రాజెక్ట్ ల్యాబ్</td>
      <!-- లంచ్ కాలమ్ ఇక్కడ రాయము (పైన rowspan తీసుకుంది) -->
      <td>డాటాబేసెస్</td>
    </tr>
  </tbody>
</table>

<table border="1" style="border-collapse: collapse; width: 100%;">
  <caption>మొబైల్ ఫోన్ల సాంకేతిక వివరాలు</caption>
  <tr>
    <td></td> <!-- ఖాళీ కార్నర్ సెల్ -->
    <th scope="col">iPhone 16</th>
    <th scope="col">Samsung S25</th>
  </tr>
  <tr>
    <th scope="row">ర్యామ్ (RAM)</th>
    <td>8 GB</td>
    <td>12 GB</td>
  </tr>
  <tr>
    <th scope="row">బ్యాటరీ</th>
    <td>3,561 mAh</td>
    <td>4,000 mAh</td>
  </tr>
</table>

/* 1. రెండు గీతల బదులు ఒకే సన్నటి బోర్డర్ కోసం */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  margin: 16px 0;
}

/* 2. సెల్స్‌కు మంచి గాలి స్థలం (Padding) */
th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

/* 3. హెడర్‌కు ఎమరాల్డ్ గ్రీన్ లేదా డార్క్ లుక్ */
th {
  background-color: #059669;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* 4. జీబ్రా స్ట్రిప్పింగ్: ఒక లైన్ లైట్ కలర్, ఒక లైన్ వైట్ కలర్ */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

/* 5. మౌస్ పాయింటర్ పెట్టినప్పుడు మెరిసే ఎఫెక్ట్ (Hover) */
tbody tr:hover {
  background-color: #ecfdf5;
  transition: background-color 0.2s ease;
}

<!-- టేబుల్ చుట్టూ రెస్పాన్సివ్ ర్యాపర్ డివ్ -->
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid #e2e8f0;">
  <table style="min-width: 600px; width: 100%; border-collapse: collapse;">
    <thead style="background: #1e293b; color: white;">
      <tr>
        <th style="padding: 10px;">ID</th>
        <th style="padding: 10px;">ఉత్పత్తి పేరు</th>
        <th style="padding: 10px;">కేటగిరీ</th>
        <th style="padding: 10px;">స్టాక్</th>
        <th style="padding: 10px;">ధర</th>
        <th style="padding: 10px;">యాక్షన్</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;">#101</td>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;">మెకానికల్ కీబోర్డ్</td>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;">ఎలక్ట్రానిక్స్</td>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;">45 యూనిట్లు</td>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;">₹ 3,499</td>
        <td style="padding: 10px; border-bottom: 1px solid #e2e8f0;"><button>ఆర్డర్</button></td>
      </tr>
    </tbody>
  </table>
</div>