---

📘 Tables in HTML – Adding Table and Border

---

🔷 1. Introduction:

Tables are used in HTML to display data in rows and columns.
They help to organize information neatly like marksheets, schedules, price lists, etc.

In HTML, the table is created using the <table> tag.

---

🔷 2. Definition:

An HTML Table is a way to arrange content in a grid of rows and columns using specific tags.

---

🔷 3. Main Tags Used in HTML Table:

Tag	Purpose
<table>	Creates the table
<tr>	Table row
<td>	Table data (cell)
<th>	Table header (bold and centered)

✅ All table content goes inside the <table> tag.

---

🔷 4. Syntax:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Gopal</td>
    <td>95</td>
  </tr>
</table>

---

🔷 5. Output:

Name	Marks
Gopal	95

✅ The border="1" shows a visible border.

---

🔷 6. Attributes of Table:

Attribute	Use
border	Shows table borders
cellspacing	Space between cells
cellpadding	Space inside cells
width, height	Table size
align	Position (left, center, right)
bgcolor	Background color

---

🔷 7. Table with All Attributes Example:

<table border="2" cellpadding="10" cellspacing="5" bgcolor="#f2f2f2" align="center">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>88</td>
  </tr>
</table>

---

🔷 8. Real-Life Uses of Tables:

• Marksheets
• Product price list
• Class timetable
• Billing invoice
• HTML content layout

---

🔷 9. Styling Table with CSS:

<style>
table {
  border-collapse: collapse;
  width: 50%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #4CAF50;
  color: white;
}
</style>

✅ CSS improves the look of the table.

---

🔷 10. Merging Cells – colspan and rowspan:

Example:

<tr>
  <td colspan="2">Combined Cell</td>
</tr>

✅ colspan="2" merges 2 columns.

<tr>
  <td rowspan="2">Vertical Cell</td>
</tr>

✅ rowspan="2" merges 2 rows.

---

🔷 11. Summary Table of Table Tags:

Tag	Use
<table>	Table start/end
<tr>	Table row
<th>	Header cell
<td>	Data cell
border	Adds border
colspan	Merge columns
rowspan	Merge rows

---

🔷 12. Advantages:

• Organizes data clearly
• Makes reading easy
• Flexible formatting
• Good for tabular content
• Can be styled beautifully

---

🔷 13. Limitations:

• Not mobile friendly by default
• Complex tables are hard to manage
• Not suitable for responsive design (use CSS grids instead)

---

---

📗 HTML में टेबल – टेबल बनाना और बॉर्डर जोड़ना

---

🔷 1. परिचय (Introduction):

HTML में टेबल का उपयोग डेटा को पंक्तियों (rows) और कॉलम (columns) में व्यवस्थित रूप से दिखाने के लिए किया जाता है।
जैसे: मार्कशीट, शेड्यूल, प्राइस लिस्ट आदि।
टेबल को बनाने के लिए <table> टैग का उपयोग होता है।

---

🔷 2. परिभाषा (Definition):

HTML Table एक ग्रिड होती है, जिसमें जानकारी को rows और columns में बांटा जाता है।
इसमें कई HTML टैग्स होते हैं जो अलग-अलग काम करते हैं।

---

🔷 3. HTML Table के मुख्य टैग्स:

टैग	कार्य
<table>	टेबल को शुरू और समाप्त करता है
<tr>	एक पंक्ति (row) बनाता है
<td>	सामान्य सेल (data) बनाता है
<th>	हैडर सेल बनाता है (बोल्ड और सेंटर में)

✅ सभी कंटेंट <table> टैग के अंदर होता है।

---

🔷 4. सिंटैक्स (Syntax):

<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Gopal</td>
    <td>95</td>
  </tr>
</table>

---

🔷 5. आउटपुट (Output):

Name	Marks
Gopal	95

✅ border="1" लगाने से बॉर्डर दिखाई देता है।

---

🔷 6. Table Attributes और उनके उपयोग:

Attribute	कार्य
border	बॉर्डर बनाता है
cellspacing	दो सेल के बीच की दूरी
cellpadding	सेल के अंदर का स्पेस
width, height	टेबल का आकार तय करता है
align	टेबल को लेफ्ट/सेंटर/राइट में सेट करता है
bgcolor	टेबल का बैकग्राउंड रंग

---

🔷 7. एक सुंदर टेबल का उदाहरण:

<table border="2" cellpadding="10" cellspacing="5" bgcolor="#f2f2f2" align="center">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>88</td>
  </tr>
</table>

---

🔷 8. वास्तविक उपयोग (Real Life Uses):

• मार्कशीट
• प्रोडक्ट प्राइस लिस्ट
• कक्षा टाइम टेबल
• बिल/इनवॉइस
• रिपोर्ट और रिपोर्ट कार्ड

---

🔷 9. CSS के साथ टेबल को सुंदर बनाना:

<style>
table {
  border-collapse: collapse;
  width: 50%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #4CAF50;
  color: white;
}
</style>

✅ CSS से टेबल दिखने में सुंदर और प्रोफेशनल बनती है।

---

🔷 10. कॉलम और रो को मर्ज करना (colspan, rowspan):

उदाहरण:

<tr>
  <td colspan="2">Combined Cell</td>
</tr>

✅ colspan="2" दो कॉलम को मिलाता है।

<tr>
  <td rowspan="2">Vertical Cell</td>
</tr>

✅ rowspan="2" दो पंक्तियों को मिलाता है।

---

🔷 11. सारांश तालिका (Summary Table):

टैग	उपयोग
<table>	टेबल शुरू और खत्म करता है
<tr>	टेबल की पंक्ति
<th>	हेडर सेल
<td>	डाटा सेल
border	बॉर्डर दिखाता है
colspan	कॉलम मिलाता है
rowspan	रो मिलाता है

---

🔷 12. लाभ (Advantages):

• जानकारी को व्यवस्थित करता है
• पढ़ने में आसान बनाता है
• आकर्षक लेआउट देता है
• रिपोर्ट और डेटा के लिए उपयोगी
• CSS के साथ सुंदर बनाया जा सकता है

---

🔷 13. सीमाएँ (Limitations):

• मोबाइल पर responsive नहीं होता
• ज्यादा जटिल टेबल संभालना कठिन
• नए डिज़ाइन में CSS Grid बेहतर विकल्प है

---

---

---