From bc207e90d01f3bc8a10d81b9d6b0fed8f7d98650 Mon Sep 17 00:00:00 2001
From: Ajay-Dhangar <ajaydhangar49@gmail.com>
Date: Thu, 9 Jan 2025 20:07:49 +0530
Subject: [PATCH] added more content

---
 .../benefits-of-semantic-html.md              |  55 +--
 .../semantic-html/semantic-html5-elements.md  | 339 ++++++++-------
 .../understanding-semantic-html.md            |  51 +++
 docs/html/tables/creating-tables.md           | 402 +++++++----------
 docs/html/tables/html-tables.md               | 407 ++++++++++--------
 docs/html/tables/table-attributes.md          | 237 ++++------
 docs/html/tables/table-structure.md           | 239 ++++++----
 docusaurus.config.js                          |  14 +-
 8 files changed, 884 insertions(+), 860 deletions(-)

diff --git a/docs/html/semantic-html/benefits-of-semantic-html.md b/docs/html/semantic-html/benefits-of-semantic-html.md
index 9aa82eee6..af74169df 100644
--- a/docs/html/semantic-html/benefits-of-semantic-html.md
+++ b/docs/html/semantic-html/benefits-of-semantic-html.md
@@ -5,60 +5,39 @@ sidebar_label: Benefits of Semantic HTML
 sidebar_position: 3
 tags: [html, web-development, semantic-html, benefits-of-semantic-html]
 description: In this tutorial, you will learn about the benefits of using semantic HTML to improve the accessibility, search engine optimization (SEO), and maintainability of your web pages.
+keywords: [semantic html benefits, semantic html advantages, semantic html importance, semantic html benefits for seo, semantic html accessibility]
 ---
 
-# Benefits of Semantic HTML
+Semantic HTML provides a structured and meaningful way to organize web content. By using semantic elements, you can enhance the accessibility, search engine optimization (SEO), and maintainability of your web pages. Let's explore some key benefits of using semantic HTML:
 
-Semantic HTML plays a crucial role in web development, offering a range of benefits that enhance the user experience, improve search engine optimization (SEO), and facilitate easier website maintenance. By using semantic tags, developers can create web pages that are more accessible, understandable, and efficient.
+<AdsComponent />
 
-## Enhanced Accessibility
+## 1. Improved Accessibility
 
-Semantic HTML elements such as `<header>`, `<nav>`, `<article>`, `<section>`, `<aside>`, and `<footer>` provide meaningful structure to web content, making it easier for assistive technologies like screen readers to interpret and navigate the page.
+Semantic HTML elements convey meaning and structure to both browsers and assistive technologies like screen readers. By using semantic tags such as `<header>`, `<nav>`, `<main>`, `<footer>`, and others, you provide context and clarity to the content, making it easier for users with disabilities to navigate and understand your website.
 
-**Example:**
+## 2. Enhanced SEO (Search Engine Optimization)
 
-```html
-<article>
-  <h2>Article Title</h2>
-  <p>Article content...</p>
-</article>
-```
+Search engines rely on the structure and semantics of your HTML content to understand and index your web pages effectively. By using semantic HTML elements, you can help search engines better interpret your content, leading to improved visibility and ranking in search results. Elements like `<article>`, `<section>`, `<aside>`, and `<nav>` provide valuable information about the purpose and structure of your content.
 
-This `<article>` tag indicates that the enclosed content is an independent, self-contained composition, which helps assistive devices understand its context.
+## 3. Better Maintainability
 
-## Improved SEO
+Semantic HTML encourages a clear separation of content and presentation, making your code more maintainable and easier to update. By using semantic elements to define the structure of your web pages, you create a consistent and logical layout that is easier to modify and extend. This separation also allows you to update the styling and layout without affecting the underlying content.
 
-Search engines prioritize content that is well-structured and semantically meaningful. By using semantic HTML, developers can ensure that their content is indexed more effectively, leading to better search engine rankings.
+<AdsComponent />
 
-**Example:**
+## 4. Consistent User Experience
 
-```html
-<section>
-  <h2>Section Heading</h2>
-  <p>Section content...</p>
-</section>
-```
+Using semantic HTML elements helps create a consistent user experience across different devices and platforms. Semantic tags provide a standardized way to structure web content, ensuring that your website looks and behaves predictably on various browsers and devices. This consistency improves usability and user satisfaction.
 
-A `<section>` tag denotes a specific section of content, making it easier for search engines to understand the webpage's structure and content hierarchy.
+## 5. Future Compatibility
 
-## Easier Maintenance and Code Readability
+Semantic HTML elements are designed to be forward-compatible with emerging web technologies and standards. By using semantic tags, you future-proof your web content and ensure that it remains accessible and relevant as new technologies evolve. Semantic elements provide a solid foundation for adapting to changes in web development practices and standards.
 
-Semantic HTML makes web pages easier to read and maintain. By clearly defining the role of each part of a webpage, developers can quickly understand and modify the code, even if they are not the original authors.
+## 6. Easier Collaboration
 
-**Example:**
-
-```html
-<footer>
-  <p>Copyright © Your Website 2024</p>
-</footer>
-```
-
-A `<footer>` tag clearly marks the end of a page and its content, simplifying the task of updating footer information across multiple pages.
-
-## Cross-Compatibility and Future-Proofing
-
-Websites built with semantic HTML are more likely to be compatible across different browsers and devices. Additionally, as web standards evolve, semantic HTML ensures that content remains accessible and functional.
+Semantic HTML provides a common vocabulary for web developers to communicate the structure and meaning of web content. By using semantic elements consistently, you make it easier for team members to understand and collaborate on web projects. Semantic tags help establish a shared understanding of the content structure, making it simpler to maintain and update web pages.
 
 ## Conclusion
 
-The benefits of semantic HTML are clear: enhanced accessibility, improved SEO, easier maintenance, and better cross-compatibility. By adopting semantic HTML in web development projects, developers can create more efficient, accessible, and future-proof websites.
+Semantic HTML offers numerous benefits for web developers and users alike. By leveraging semantic elements to structure your web content, you can improve accessibility, SEO, maintainability, user experience, and future compatibility. Embracing semantic HTML is a best practice that enhances the quality and effectiveness of your web projects.
\ No newline at end of file
diff --git a/docs/html/semantic-html/semantic-html5-elements.md b/docs/html/semantic-html/semantic-html5-elements.md
index 15c7fab5b..bc9d59edb 100644
--- a/docs/html/semantic-html/semantic-html5-elements.md
+++ b/docs/html/semantic-html/semantic-html5-elements.md
@@ -5,182 +5,233 @@ sidebar_label: Semantic HTML5 Elements
 sidebar_position: 2
 tags: [html, web-development, semantic-html, semantic-html5-elements]
 description: In this tutorial, you will learn about semantic HTML5 elements and how they can improve the structure, accessibility, and search engine optimization (SEO) of your web pages.
+keywords: [semantic html5 elements, semantic html5 tags, semantic html5 benefits, semantic html5 importance, html5 semantic elements]
 ---
 
 Semantic HTML5 elements provide meaning to web content beyond mere presentation. They help in creating accessible and search engine friendly web pages by clearly defining the structure and purpose of different parts of web content.
 
+<AdsComponent />
+
 ## Common Semantic HTML5 Elements
+
 Semantic elements in HTML5 are those that clearly describe their meaning in a human- and machine-readable way. Elements such as `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, and `<time>` not only help in structuring the content but also define its purpose on the web page.
 
-<table>
-    <tbody>
-        <tr>
-            <th>Tag</th>
-            <th>Description</th>
-        </tr>
-        <tr>
-            <td><a href="/docs/html/semantic-html/semantic-html5-elements#article">&lt;article&gt;</a></td>
-            <td>Defines independent, self-contained content</td>
-        </tr>
-        <tr>
-            <td><a href="/docs/html/semantic-html/semantic-html5-elements#aside">&lt;aside&gt;</a></td>
-            <td>Defines content aside from the page content</td>
-        </tr>
-        <tr>
-            <td><a href="/docs/html/semantic-html/semantic-html5-elements#footer">&lt;footer&gt;</a></td>
-            <td>Defines a footer for a document or section</td>
-        </tr>
-        <tr>
-            <td><a href="/docs/html/semantic-html/semantic-html5-elements#header">&lt;header&gt;</a></td>
-            <td>Specifies a header for a document or section</td>
-        </tr>
-        <tr>
-            <td><a href="/docs/html/semantic-html/semantic-html5-elements#nav">&lt;nav&gt;</a></td>
-            <td>Defines navigation links</td>
-        </tr>
-    </tbody>
-</table>
+| Element       | Description                                      |
+|---------------|--------------------------------------------------|
+| `<article>`   | Defines independent, self-contained content      |
+| `<aside>`     | Represents content aside from the content it is placed in |
+| `<details>`   | Defines additional details that the user can view or hide |
+| `<figcaption>`| Represents a caption or legend for a `<figure>` element |
+| `<figure>`    | Represents self-contained content, such as images, diagrams, or code snippets |
+| `<footer>`    | Defines a footer for a document or a section      |
+| `<header>`    | Defines a header for a document or a section      |
+| `<main>`      | Specifies the main content of a document          |
+| `<mark>`      | Highlights text within the content                |
+| `<nav>`       | Defines navigation links                         |
+| `<section>`   | Represents a generic section of a document or application |
+| `<summary>`   | Defines a visible heading for a `<details>` element |
+| `<time>`      | Represents a specific time or date                |
+
+<AdsComponent />
+
+## Examples of Semantic HTML5 Elements
+
+Let's look at some examples of how semantic HTML5 elements can be used to structure web content effectively.
 
 ### `<article>`
 
 Defines independent, self-contained content that could be distributed and reused (e.g., in syndication).
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <article>
-      <h2>Article Title</h2>
-      <p>Article content...</p>
-    </article>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url="http://127.0.0.1:5500/article.html">
-        <div>
-            <article>
-              <h2>Article Title</h2>
-              <p>Article content...</p>
-            </article>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<article>
+  <h2>Article Title</h2>
+  <p>Article content goes here...</p>
+</article>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <article>
+    <h2>Article Title</h2>
+    <p>Article content goes here...</p>
+  </article>
+</BrowserWindow>
+
+</div>
 
 ### `<aside>`
 
 Defines content aside from the content it is placed in (like a sidebar). The content should be related to the surrounding content.
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <aside>
-      <p>Sidebar content or related links</p>
-    </aside>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url="http://127.0.0.1:5500/aside.html">
-        <div>
-            <aside>
-              <p>Sidebar content or related links</p>
-            </aside>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<aside>
+  <h3>Related Links</h3>
+  <ul>
+    <li><a href="#">Link 1</a></li>
+    <li><a href="#">Link 2</a></li>
+    <li><a href="#">Link 3</a></li>
+  </ul>
+</aside>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <aside>
+    <h3>Related Links</h3>
+    <ul>
+      <li><a href="#">Link 1</a></li>
+      <li><a href="#">Link 2</a></li>
+      <li><a href="#">Link 3</a></li>
+    </ul>
+  </aside>
+</BrowserWindow>
+
+</div>
+
+<AdsComponent />
 
 ### `<footer>`
 
 Defines a footer for a document or a section. It typically contains authorship information, copyright notices, and links to privacy policies.
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <footer>
-      <p>Copyright © Your Website 2024</p>
-    </footer>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url="http://127.0.0.1:5500/footer.html">
-        <div>
-            <footer>
-              <p>Copyright © Your Website 2024</p>
-            </footer>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+<div className="flex flex-wrap items-center my-4 gap-4">
 
-### `<header>`
+```html title="index.html"
+<footer>
+  <p>&copy; 2025 My Website</p>
+</footer>
+```
 
-Defines a header for a document or a section. It typically contains introductory content or navigation links.
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <footer>
+    <p>&copy; 2025 My Website</p>
+  </footer>
+</BrowserWindow>
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <header>
-      <h1>Website Title</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-      </nav>
-    </header>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url="http://127.0.0.1:5500/header.html">
-        <div>
-            <header>
-              <h1>Website Title</h1>
-              <nav>
-                <ul>
-                  <li><a href="#">Home</a></li>
-                  <li><a href="#">About</a></li>
-                  <li><a href="#">Contact</a></li>
-                </ul>
-              </nav>
-            </header>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+</div>
 
-### `<nav>`
+### `<header>`
 
-Defines navigation links, making it easier for users to navigate through the website. It is intended for major blocks of navigation links.
+Defines a header for a document or a section. It typically contains introductory content or navigation links.
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<header>
+  <h1>My Website</h1>
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <header>
+    <h1>My Website</h1>
     <nav>
       <ul>
-        <li><a href="#home">Home</a></li>
-        <li><a href="#news">News</a></li>
-        <li><a href="#contact">Contact</a></li>
-        <li><a href="#about">About</a></li>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Contact</a></li>
       </ul>
     </nav>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url="http://127.0.0.1:5500/nav.html">
-        <div>
-            <nav>
-              <ul>
-                <li><a href="#home">Home</a></li>
-                <li><a href="#news">News</a></li>
-                <li><a href="#contact">Contact</a></li>
-                <li><a href="#about">About</a></li>
-              </ul>
-            </nav>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+  </header>
+</BrowserWindow>
+
+</div>
+
+<AdsComponent />
+
+### `<nav>`
+
+Defines navigation links, making it easier for users to navigate through the website. It is intended for major blocks of navigation links.
+
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<nav>
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+</BrowserWindow>
+
+</div>
+
+### `<section>`
+
+Represents a generic section of a document or application. It is used to group related content together.
+
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<section>
+  <h2>Section Title</h2>
+  <p>Section content goes here...</p>
+</section>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <section>
+    <h2>Section Title</h2>
+    <p>Section content goes here...</p>
+  </section>
+</BrowserWindow>
+
+</div>
+
+### `<time>`
+
+Represents a specific time or date. It can be used to mark up dates, times, or durations.
+
+<div className="flex flex-wrap items-center my-4 gap-4">
+
+```html title="index.html"
+<time datetime="2025-01-09T09:00">
+    January 9, 2025 at 9:00 AM
+</time>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <time datetime="2025-01-09T09:00">
+      January 9, 2025 at 9:00 AM
+    </time>
+</BrowserWindow>
+
+</div>
+
+<AdsComponent />
+
+## Benefits of Semantic HTML5 Elements
+
+Semantic HTML5 elements offer several benefits for web developers and users:
+
+1. **Accessibility**: Semantic elements help screen readers and other assistive technologies understand the structure and purpose of web content, making it more accessible to users with disabilities.
+2. **SEO-Friendly**: Search engines can better understand the content and context of a web page when semantic elements are used, leading to improved search engine rankings.
+3. **Maintenance**: Semantic elements make it easier to maintain and update web pages by providing a clear structure that separates content from presentation.
+4. **Readability**: Semantic elements improve the readability and maintainability of code by clearly defining the purpose of different parts of a web page.
+5. **Consistency**: Using semantic elements consistently across a website helps create a standardized structure that enhances user experience and usability.
+6. **Future-Proofing**: Semantic elements are designed to be forward-compatible with future web technologies, ensuring that web content remains relevant and accessible over time.
+7. **Developer-Friendly**: Semantic elements provide a common vocabulary for web developers to communicate the structure and meaning of web content, making it easier to collaborate and maintain code.
+
 
 ## Conclusion
 
diff --git a/docs/html/semantic-html/understanding-semantic-html.md b/docs/html/semantic-html/understanding-semantic-html.md
index f0f10ed87..87e1a5e03 100644
--- a/docs/html/semantic-html/understanding-semantic-html.md
+++ b/docs/html/semantic-html/understanding-semantic-html.md
@@ -5,10 +5,13 @@ sidebar_label: Understanding Semantic HTML
 sidebar_position: 1
 tags: [html, web-development, semantic-html]
 description: In this tutorial, you will learn about semantic HTML and how it can improve the accessibility, search engine optimization (SEO), and maintainability of your web pages.
+keywords: [semantic html, semantic html elements, semantic html tags, semantic html benefits, semantic html importance]
 ---
 
 Semantic HTML refers to HTML that introduces meaning to the web page rather than just presentation. Using semantic tags gives the web page a structured and meaningful layout, which helps search engines to index the page better and improves accessibility for users with assistive technologies.
 
+<AdsComponent />
+
 ## What is Semantic HTML?
 
 Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. It uses HTML tags that give information about the contents of those tags that goes beyond just how they look on the page.
@@ -34,6 +37,54 @@ Semantic HTML elements clearly describe their meaning in a human- and machine-re
 - **`<nav>`**: Defines navigation links.
 - **`<aside>`**: Marks content that is tangentially related to the content around it.
 
+<AdsComponent />
+
+## Example: Using Semantic HTML
+
+Here is an example that demonstrates the use of semantic HTML elements to structure a web page:
+
+```html title="semantic-html-example.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Semantic HTML Example</title>
+</head>
+<body>
+  <header>
+    <h1>My Website</h1>
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <section>
+    <h2>Section Heading</h2>
+    <p>Section content...</p>
+  </section>
+  <aside>
+    <h3>Related Content</h3>
+    <ul>
+      <li><a href="#">Link 1</a></li>
+      <li><a href="#">Link 2</a></li>
+      <li><a href="#">Link 3</a></li>
+    </ul>
+  </aside>
+  <footer>
+    <p>Copyright © Your Website 2024</p>
+  </footer>
+</body>
+</html>
+```
+
+In the example above, we have used semantic HTML elements such as `<header>`, `<nav>`, `<section>`, `<aside>`, and `<footer>` to structure the web page. This makes the content more meaningful and provides a clear hierarchy for both users and search engines.
+
+By using semantic HTML, developers can create web pages that are more accessible, understandable, and efficient. This not only benefits users but also improves search engine rankings and makes the website easier to maintain and update.
+
 ## Conclusion
 
 Semantic HTML is essential for creating web pages that are accessible, easily maintained, and optimized for search engine rankings. By using semantic elements, developers can create web pages that not only look good but also provide a better user experience and are more inclusive. As web standards evolve, the importance of semantic HTML will continue to grow, making it a critical aspect of modern web development.
\ No newline at end of file
diff --git a/docs/html/tables/creating-tables.md b/docs/html/tables/creating-tables.md
index 9a47eb827..f8bb24091 100644
--- a/docs/html/tables/creating-tables.md
+++ b/docs/html/tables/creating-tables.md
@@ -4,269 +4,175 @@ title: Creating Tables in HTML
 sidebar_label: Creating Tables
 sidebar_position: 2
 tags: [html, web-development, tables]
-description: In this tutorial, you will learn how to create tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages.
+description: "In this tutorial, you will learn how to create tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages."
+keywords: [html tables, creating tables in html, html table tags, html table structure, html table example]
 ---
 
+Creating tables in HTML is a common task when building web pages. Tables are used to display data in rows and columns, making it easier to organize and present information. In this tutorial, you will learn how to create tables in HTML using the `<table>`, `<tr>`, and `<td>` tags.
 
-Tables in HTML are a powerful way to organize and display data in a structured format using rows and columns. This tutorial will guide you through the basic elements and steps needed to create tables in HTML.
-
-### 1. Basic Table Structure
-
-A basic HTML table is created using the `<table>` element. Inside the table, you use `<tr>` for table rows, `<th>` for table headers, and `<td>` for table data (cells).
-
-### Example:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTML Table Example</title>
-</head>
-<body>
-    <h1>Simple HTML Table</h1>
-    <table border="1">
-        <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-            <th>Header 3</th>
-        </tr>
-        <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
-            <td>Data 3</td>
-        </tr>
-        <tr>
-            <td>Data 4</td>
-            <td>Data 5</td>
-            <td>Data 6</td>
-        </tr>
-    </table>
-</body>
-</html>
-```
+<AdsComponent />
+
+This guide will explore how to construct tables step by step and demonstrate using different elements and attributes.
+
+### Step 1: Start with the `<table>` Element
+
+To create a table, you start with the `<table>` tag, which serves as the container for all table content. Inside this tag, you define rows and cells.
+
+Example:
 
-### 2. Adding Table Borders
-
-You can add borders to your table for better visibility using the `border` attribute in the `<table>` tag.
-
-### 3. Table Headers
-
-Table headers are defined using the `<th>` element, which by default displays text in bold and centers it.
-
-### 4. Table Data
-
-Table data cells are defined using the `<td>` element.
-
-### 5. Spanning Rows and Columns
-
-You can make a cell span multiple rows or columns using the `rowspan` and `colspan` attributes.
-
-### Example:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rowspan and Colspan Example</title>
-</head>
-<body>
-    <h1>Table with Rowspan and Colspan</h1>
-    <table border="1">
-        <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-            <th>Header 3</th>
-        </tr>
-        <tr>
-            <td rowspan="2">Rowspan 2</td>
-            <td>Data 1</td>
-            <td>Data 2</td>
-        </tr>
-        <tr>
-            <td colspan="2">Colspan 2</td>
-        </tr>
-    </table>
-</body>
-</html>
+```html title="table-example.html"
+<table>
+  <!-- Table content goes here -->
+</table>
 ```
 
-### 6. Adding Table Captions
-
-You can add a caption to your table using the `<caption>` element.
-
-### Example:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Table Caption Example</title>
-</head>
-<body>
-    <h1>Table with Caption</h1>
-    <table border="1">
-        <caption>This is a table caption</caption>
-        <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-            <th>Header 3</th>
-        </tr>
-        <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
-            <td>Data 3</td>
-        </tr>
-        <tr>
-            <td>Data 4</td>
-            <td>Data 5</td>
-            <td>Data 6</td>
-        </tr>
-    </table>
-</body>
-</html>
+### Step 2: Add Table Rows (`<tr>`) and Cells (`<td>`)
+
+Inside the `<table>` element, you define rows using the `<tr>` tag. Each row contains one or more cells, which are created using the `<td>` tag. Cells are the individual data points within the table.
+
+Example:
+
+```html title="table-example.html"
+<table>
+  <tr>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
+  </tr>
+</table>
 ```
 
-### 7. Styling Tables with CSS
-
-You can enhance the appearance of your tables using CSS.
-
-### Example:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Styled Table Example</title>
-    <style>
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-        th, td {
-            padding: 8px;
-            text-align: left;
-            border-bottom: 1px solid #ddd;
-        }
-        th {
-            background-color: #f2f2f2;
-        }
-        tr:hover {
-            background-color: #f5f5f5;
-        }
-    </style>
-</head>
-<body>
-    <h1>Styled HTML Table</h1>
-    <table>
-        <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-            <th>Header 3</th>
-        </tr>
-        <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
-            <td>Data 3</td>
-        </tr>
-        <tr>
-            <td>Data 4</td>
-            <td>Data 5</td>
-            <td>Data 6</td>
-        </tr>
-    </table>
-</body>
-</html>
+In the example above, we have a table with two rows, each containing two cells. The table structure is as follows:
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <tr>
+      <td>Row 1, Cell 1</td>
+      <td>Row 1, Cell 2</td>
+    </tr>
+    <tr>
+      <td>Row 2, Cell 1</td>
+      <td>Row 2, Cell 2</td>
+    </tr>
+  </table>
+</BrowserWindow>
+
+<AdsComponent />
+
+### Step 3: Add Table Headings (`<th>`)
+
+In addition to regular cells, you can use the `<th>` tag to define table headings. Headings are displayed in bold by default and are useful for labeling rows or columns.
+
+Example:
+
+```html title="table-example.html"
+<table>
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
+  </tr>
+</table>
 ```
-## Important Points 
-
-### 1. Basic Table Structure
-- **Elements:**
-  - `<table>`: Defines the table.
-  - `<tr>`: Defines a table row.
-  - `<th>`: Defines a table header (bold and centered by default).
-  - `<td>`: Defines a table cell (data).
-
-### 2. Adding Borders
-- Use the `border` attribute to add borders to the table for better visibility.
-  ```html
-  <table border="1">
-  ```
-
-### 3. Table Headers
-- **Usage:** Use `<th>` for headers to highlight important columns.
-  ```html
+
+In the example above, we have added table headings to the first row of the table. The headings are displayed in bold:
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+    <tr>
+      <td>Row 1, Cell 1</td>
+      <td>Row 1, Cell 2</td>
+    </tr>
+    <tr>
+      <td>Row 2, Cell 1</td>
+      <td>Row 2, Cell 2</td>
+    </tr>
+  </table>
+</BrowserWindow>
+
+### Step 4: Add Table Captions (`<caption>`)
+
+You can include a caption for the table using the `<caption>` tag. The caption appears above or below the table and provides a brief description or title for the table content.
+
+Example:
+
+```html title="table-example.html"
+<table>
+  <caption>Sample Table</caption>
   <tr>
     <th>Header 1</th>
     <th>Header 2</th>
-    <th>Header 3</th>
   </tr>
-  ```
-
-### 4. Spanning Rows and Columns
-- **Rowspan:** Use the `rowspan` attribute to make a cell span multiple rows.
-  ```html
-  <td rowspan="2">Rowspan 2</td>
-  ```
-- **Colspan:** Use the `colspan` attribute to make a cell span multiple columns.
-  ```html
-  <td colspan="2">Colspan 2</td>
-  ```
-
-### 5. Adding Captions
-- Use the `<caption>` element to add a caption or title to your table.
-  ```html
-  <caption>This is a table caption</caption>
-  ```
-
-### 6. Input Data into Table
-- **Data Cells:** Use `<td>` to input data into table cells.
-  ```html
   <tr>
-    <td>Data 1</td>
-    <td>Data 2</td>
-    <td>Data 3</td>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
   </tr>
-  ```
-
-### 7. Styling Tables with CSS
-- **CSS Styling:**
-  - Use CSS to improve the table's appearance, like padding, text alignment, border styles, and hover effects.
-  ```html
-  <style>
-    table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    th, td {
-      padding: 8px;
-      text-align: left;
-      border-bottom: 1px solid #ddd;
-    }
-    th {
-      background-color: #f2f2f2;
-    }
-    tr:hover {
-      background-color: #f5f5f5;
-    }
-  </style>
-  ```
-
-### 8. Accessibility
-- **Headers and Scope:**
-  - Use the `scope` attribute to specify header scope for better accessibility.
-  ```html
-  <th scope="col">Header 1</th>
-  <th scope="row">Row Header</th>
-  ```
-
-### 9. Responsive Tables
-- **Responsive Design:** Ensure tables are responsive for better viewing on mobile devices.
-  - Example techniques include using CSS media queries and wrapping tables in a div with overflow styling.
+</table>
+```
+
+In the example above, we have added a caption to the table:
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <caption>Sample Table</caption>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+    <tr>
+      <td>Row 1, Cell 1</td>
+      <td>Row 1, Cell 2</td>
+    </tr>
+    <tr>
+      <td>Row 2, Cell 1</td>
+      <td>Row 2, Cell 2</td>
+    </tr>
+  </table>
+</BrowserWindow>
+
+<AdsComponent />
+
+### Step 5: Styling the Table
+
+You can style the table using CSS to change its appearance, such as the background color, text color, border, padding, and spacing. Here is an example of styling the table using CSS:
+
+```css title="styles.css"
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+```
+
+In this CSS code snippet, we set the table width to 100%, collapse the borders, add padding to cells, align text to the left, and style the table headings with a light gray background.
 
 ### Conclusion
 
-Creating tables in HTML is straightforward and allows you to effectively organize and present data on web pages. By understanding the basic elements and techniques for adding borders, spanning rows and columns, adding captions, and applying CSS styles, you can create attractive and functional tables to display your information.
\ No newline at end of file
+In this tutorial, you learned how to create tables in HTML using the `<table>`, `<tr>`, `<td>`, `<th>`, and `<caption>` tags. Tables are essential for displaying data in a structured format on web pages. You can further enhance the appearance of tables by applying CSS styles to customize their look and feel.
\ No newline at end of file
diff --git a/docs/html/tables/html-tables.md b/docs/html/tables/html-tables.md
index 76ba6aa18..e987dad13 100644
--- a/docs/html/tables/html-tables.md
+++ b/docs/html/tables/html-tables.md
@@ -5,206 +5,273 @@ sidebar_label: HTML Tables
 sidebar_position: 1
 tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure]
 description: This guide will introduce you to HTML tables, their importance, and how to use them to organize data on web pages. You'll learn about creating tables, structuring rows and columns, and customizing tables with HTML attributes.
+keywords: [html tables, html table structure, html table tags, html table attributes, web development, web design, html tutorial]
 ---
 
+Tables in HTML are used to organize and present data in a structured format on web pages. HTML tables consist of rows and columns that allow you to display information in a grid-like layout. Tables are commonly used for displaying tabular data, creating calendars, pricing tables, and more.
 
-HTML tables are used to organize and display data in a tabular format on web pages. With tables, you can present data in rows and columns, making it easier for users to read and understand the information. Tables are versatile and can be used for various purposes, such as displaying statistical data, creating forms, or arranging content in a structured layout.
+<AdsComponent />
 
-## Creating Tables
+## Why Use HTML Tables?
 
-To create a table in HTML, you use the `<table>` element. This element serves as the container for all other table-related elements.
+HTML tables offer several benefits for organizing and presenting data on web pages:
 
-```html
-<table>
-  <!-- Table content goes here -->
-</table>
+1. **Structured Layout:** Tables provide a structured layout for displaying data in rows and columns, making it easier for users to read and understand the information.
+2. **Data Organization:** Tables help organize data into categories, making it easier to compare and analyze different data points.
+3. **Visual Presentation:** Tables allow you to present data in a visually appealing format, enhancing the overall design of your web pages.
+4. **Responsive Design:** Tables can be styled and optimized for responsive design, ensuring that they display correctly on various devices and screen sizes.
+5. **Accessibility:** Tables can be made accessible to users with disabilities by using proper markup and attributes to enhance screen reader compatibility.
+6. **SEO Benefits:** Well-structured tables can improve the SEO of your web pages by providing search engines with clear data patterns and relationships.
+7. **Consistency:** Tables help maintain consistency in data presentation across different sections of a website, improving the user experience.
+8. **Customization:** Tables can be customized with HTML attributes and CSS styles to match the design and branding of your website.
+9. **Data Comparison:** Tables are ideal for comparing data points side by side, allowing users to make informed decisions based on the information presented.
+10. **Cross-Browser Compatibility:** HTML tables are supported by all major web browsers, ensuring consistent rendering across different platforms.
+11. **Versatility:** Tables can be used for a wide range of purposes, from simple data display to complex layouts and designs.
+12. **Scalability:** Tables can scale to accommodate large datasets without compromising readability or usability.
+
+<AdsComponent />
+
+## Creating an HTML Table
+
+To create an HTML table, you use the following tags:
+
+- `<table>`: Defines the table element.
+- `<tr>`: Defines a table row.
+- `<th>`: Defines a table header cell.
+- `<td>`: Defines a table data cell.
+- `<caption>`: Defines a table caption (optional).
+- `<thead>`: Defines the header section of a table.
+- `<tbody>`: Defines the body section of a table.
+- `<tfoot>`: Defines the footer section of a table.
+- `<colgroup>`: Defines a group of columns in a table.
+- `<col>`: Defines the properties of a column in a table.
+
+Here's an example of a simple HTML table with three rows and three columns:
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML Table Example</title>
+</head>
+
+<body>
+  <h1>Employee Information</h1>
+  <table>
+    <caption>Employee Data</caption>
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Department</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>001</td>
+        <td>John Doe</td>
+        <td>Marketing</td>
+      </tr>
+      <tr>
+        <td>002</td>
+        <td>Jane Smith</td>
+        <td>Finance</td>
+      </tr>
+      <tr>
+        <td>003</td>
+        <td>Michael Johnson</td>
+        <td>Engineering</td>
+      </tr>
+    </tbody>
+  </table>
+</body>
+</html>
 ```
 
-## Table Structure
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+<>
+  <h1>Employee Information</h1>
+  <table>
+    <caption>Employee Data</caption>
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Department</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>001</td>
+        <td>John Doe</td>
+        <td>Marketing</td>
+      </tr>
+      <tr>
+        <td>002</td>
+        <td>Jane Smith</td>
+        <td>Finance</td>
+      </tr>
+      <tr>
+        <td>003</td>
+        <td>Michael Johnson</td>
+        <td>Engineering</td>
+      </tr>
+    </tbody>
+  </table>
+</>
+</BrowserWindow>
 
-A table is structured into rows and columns, and can include headers for columns or rows. These elements are essential for organizing data within the table.
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <table>
-        <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
-        </tr>
-        <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
-        </tr>
-    </table>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-        <div>
-            <table>
-                <tr>
-                    <th>Header 1</th>
-                    <th>Header 2</th>
-                </tr>
-                <tr>
-                    <td>Data 1</td>
-                    <td>Data 2</td>
-                </tr>
-            </table>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
-
-- **Rows** : The `<tr>` element defines a table row. It acts as a container for table cells, which can be either table data cells (`<td>`) or table header cells (`<th>`). Rows are used to group together logical sets of data or to define lines of table headers.
-<Tabs>
-    <TabItem value="HTML">
-    ```html
+In this example, we have created a simple table to display employee information. The table consists of a header row with column headings (`ID`, `Name`, `Department`) and three data rows with employee details.
+
+<AdsComponent />
+
+## Table Structure and Elements
+
+### 1. Table Element (`<table>`)
+
+The `<table>` element is used to define a table in HTML. It contains one or more `<tr>` elements, which represent table rows. The table element can also contain other elements like `<caption>`, `<thead>`, `<tbody>`, and `<tfoot>` for additional structure and organization.
+
+### 2. Table Row (`<tr>`)
+
+The `<tr>` element defines a row in a table. It contains one or more `<th>` or `<td>` elements, which represent table header cells or table data cells, respectively. Each `<tr>` element represents a row in the table. Table rows can be grouped into sections using `<thead>`, `<tbody>`, and `<tfoot>` elements.
+
+### 3. Table Header Cell (`<th>`)
+
+The `<th>` element defines a header cell in a table. It is used to represent column headings or labels in a table. Header cells are typically displayed in bold and centered by default. They are commonly used in the first row of a table to label the columns.
+
+### 4. Table Data Cell (`<td>`)
+
+The `<td>` element defines a data cell in a table. It is used to represent data values or content in a table. Data cells are displayed with normal text formatting and are used to populate the rows of the table with actual data.
+
+### 5. Table Caption (`<caption>`)
+
+The `<caption>` element defines a caption for a table. It is optional and is typically displayed above or below the table to provide a brief description or title for the table. The caption element helps users understand the purpose or context of the table.
+
+### 6. Table Header (`<thead>`), Body (`<tbody>`), and Footer (`<tfoot>`)
+
+The `<thead>`, `<tbody>`, and `<tfoot>` elements are used to group the header, body, and footer sections of a table, respectively. The `<thead>` element contains header rows, the `<tbody>` element contains data rows, and the `<tfoot>` element contains footer rows. This structure helps organize and style different parts of the table.
+
+```html title="Table Sections Example"
+<table>
+  <caption>Monthly Sales Report</caption>
+  <thead>
     <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
+      <th>Month</th>
+      <th>Sales Amount</th>
     </tr>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-            <div>
-                <tr>
-                    <td>Data 1</td>
-                    <td>Data 2</td>
-                </tr>
-            </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
-
-- **Columns**: The `<td>` element represents a table data cell in a row, containing the actual data. Columns are created by adding `<td>` or `<th>` elements within `<tr>` elements. Each `<td>` or `<th>` in a row represents a column.
-
-<Tabs>
-    <TabItem value="HTML">
-    ```html
+  </thead>
+  <tbody>
     <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
+      <td>January</td>
+      <td>$10,000</td>
     </tr>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-            <tr>
-                <td>Data 1</td>
-                <td>Data 2</td>
-            </tr>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
-
-- **Headers**: The `<th>` element is used for table header cells, which typically contain titles or labels for the columns or rows. Headers help users understand the data presented in the table. They can be used at the top of columns or at the beginning of rows, depending on how the table is organized.
-
-<Tabs>
-    <TabItem value="HTML">
-    ```html
     <tr>
-        <th>Header 1</th>
-        <th>Header 2</th>
+      <td>February</td>
+      <td>$12,500</td>
     </tr>
+  </tbody>
+  <tfoot>
     <tr>
-        <td>Data 1</td>
-        <td>Data 2</td>
+      <td>Total</td>
+      <td>$22,500</td>
     </tr>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-            <tr>
-                <th>Header 1</th>
-                <th>Header 2</th>
-            </tr>
+  </tfoot>
+</table>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+    <table>
+        <caption>Monthly Sales Report</caption>
+        <thead>
         <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
+            <th>Month</th>
+            <th>Sales Amount</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>January</td>
+            <td>$10,000</td>
         </tr>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
+        <tr>
+            <td>February</td>
+            <td>$12,500</td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+            <td>Total</td>
+            <td>$22,500</td>
+        </tr>
+        </tfoot>
+    </table>
+</BrowserWindow>
 
-## Table Attributes
+<AdsComponent />
 
-Tables and their elements support various attributes to customize their appearance and behavior. Some common attributes include:
+### 7. Column Group (`<colgroup>`) and Column (`<col>`)
 
-- **border**: Specifies the border thickness of the table.
-- **cellpadding**: Defines the space between the cell content and its borders.
-- **cellspacing**: Sets the space between cells.
+The `<colgroup>` and `<col>` elements are used to define groups of columns in a table. The `<colgroup>` element contains one or more `<col>` elements, which define the properties of individual columns, such as width, alignment, and styling. Column groups can be used to apply styles to multiple columns at once.
 
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <table border="1" cellpadding="4" cellspacing="0">
+```html title="Column Group Example"
+<table>
+  <colgroup>
+    <col style="background-color: lightblue;">
+    <col style="background-color: lightgreen;">
+    <col style="background-color: lightcoral;">
+  </colgroup>
+  <tr>
+    <th>Column 1</th>
+    <th>Column 2</th>
+    <th>Column 3</th>
+  </tr>
+  <tr>
+    <td>Data 1</td>
+    <td>Data 2</td>
+    <td>Data 3</td>
+  </tr>
+</table>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+    <table>
+        <colgroup>
+            <col style={{backgroundColor: "lightblue"}} />
+            <col style={{backgroundColor: "lightgreen"}} />
+            <col style={{backgroundColor: "lightcoral"}} />
+        </colgroup>
         <tr>
-            <th>Header 1</th>
-            <th>Header 2</th>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
         </tr>
         <tr>
             <td>Data 1</td>
             <td>Data 2</td>
+            <td>Data 3</td>
         </tr>
     </table>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-        <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-        <div>
-            <table border="1" cellpadding="4" cellspacing="0">
-                <tr>
-                    <th>Header 1</th>
-                    <th>Header 2</th>
-                </tr>
-                <tr>
-                    <td>Data 1</td>
-                    <td>Data 2</td>
-                </tr>
-            </table>
-        </div>
-        </BrowserWindow>
-    </TabItem>
-</Tabs>
-
-
-
-## Table Captions and Summaries
-
-- **Captions**: The `<caption>` element is used to provide a title or summary for the table, which is displayed above the table.
-
-- **Summaries**: Although not represented by a specific HTML element, summaries can be provided using the `summary` attribute (deprecated in HTML5) or through other means such as a paragraph before or after the table to describe its purpose or content for users and search engines.
-
-<Tabs>
-    <TabItem value="HTML">
-    ```html
-    <table>
-        <caption>Table Caption</caption>
-        <tr>
-            <td>Data 1</td>
-            <td>Data 2</td>
-       </tr>
-    </table>
-    ```
-    </TabItem>
-    <TabItem value="Output">
-    <BrowserWindow url ="http://127.0.0.1:5500/index.html">
-        <table>
-            <div>
-            <caption>Table Caption</caption>
-            <!-- Table content -->
-                <tr>
-                    <td>Data 1</td>
-                    <td>Data 2</td>
-                </tr>
-            </div>
-        </table>
-    </BrowserWindow>
-    </TabItem>
-</Tabs>
+</BrowserWindow>
+
+<AdsComponent />
+
+:::tip
+- Use the `<th>` element for header cells and the `<td>` element for data cells.
+- Group related rows using the `<thead>`, `<tbody>`, and `<tfoot>` elements.
+- Use the `<caption>` element to provide a title or description for the table.
+- Use the `<colgroup>` and `<col>` elements to style and format columns.
+- Avoid using tables for layout purposes; use CSS for layout design.
+- Make tables accessible by providing meaningful captions, headers, and row/column labels.
+- Test tables on different devices and screen sizes to ensure responsive design.
+- Use CSS to style tables and improve their visual appearance.
+- Consider using JavaScript libraries or frameworks for advanced table functionalities.
+- Keep tables simple and easy to read to enhance user experience.
+- Use semantic HTML elements to improve SEO and accessibility.
+- Validate your HTML code to ensure proper table structure and syntax.
+:::
 
 ## Conclusion
 
-HTML tables are a powerful tool for web developers to present data in a structured and organized manner. By understanding how to create tables, structure rows and columns, and utilize table attributes, you can enhance the readability and usability of your web pages. Remember to use tables for tabular data presentation and consider accessibility and responsive design practices to ensure your tables work well across all devices.
\ No newline at end of file
+HTML tables are a powerful tool for organizing and presenting data on web pages. By using tables effectively, you can create visually appealing layouts that enhance the user experience and make information easier to understand. Understanding the structure and elements of HTML tables is essential for creating well-designed and accessible tables for your website.
\ No newline at end of file
diff --git a/docs/html/tables/table-attributes.md b/docs/html/tables/table-attributes.md
index 0d90e0d2a..714089a80 100644
--- a/docs/html/tables/table-attributes.md
+++ b/docs/html/tables/table-attributes.md
@@ -4,179 +4,92 @@ title: Table Attributes in HTML
 sidebar_label: Table Attributes
 sidebar_position: 4
 tags: [html, web-development, table-attributes, tables]
-description: In this tutorial, you will learn about table attributes in HTML. Table attributes define the appearance, behavior, and structure of tables on web pages.
+description: "In this tutorial, you will learn about table attributes in HTML. Table attributes define the appearance, behavior, and structure of tables on web pages."
+keywords:
+  [
+    html table attributes,
+    html table properties,
+    html table attributes list,
+    web development,
+    html tutorial,
+  ]
 ---
 
-In HTML, tables are used to organize data into rows and columns. Table attributes define the appearance, behavior, and structure of tables on web pages. Here are some commonly used table attributes:
-
-### Table Tag and Attributes
-
- **`<table>`**: This is the main tag used to create a table.
-   - **`border`**: Specifies the width of the border around the table and its cells.
-   - **`cellpadding`**: Defines the space between the cell content and its border.
-   - **`cellspacing`**: Defines the space between cells.
-   - **`width`**: Specifies the width of the table.
-   - **`height`**: Specifies the height of the table.
-   - **`align`**: Specifies the alignment of the table (left, center, right).
-   - **`bgcolor`**: Specifies the background color of the table.
-
-   ```html
-   <table border="1" cellpadding="10" cellspacing="0" width="50%" height="200" align="center" bgcolor="#f0f0f0">
-       <!-- Table content -->
-   </table>
-   ```
-
-### Table Header
-
- **`<th>`**: Defines a header cell in a table. Header cells are bold and centered by default.
-   - **`scope`**: Specifies whether a header cell is a header for a column, row, or group of columns or rows.
-
-   ```html
-   <th scope="col">Header</th>
-   ```
-
-### Table Rows and Cells
-
- **`<tr>`**: Defines a row in a table.
-   - **`bgcolor`**: Specifies the background color of the row.
-   - **`align`**: Specifies the horizontal alignment of the row's content.
-   - **`valign`**: Specifies the vertical alignment of the row's content.
-
-   ```html
-   <tr bgcolor="#d3d3d3" align="left" valign="top">
-       <!-- Row content -->
-   </tr>
-   ```
-
- **`<td>`**: Defines a standard data cell in a table.
-   - **`colspan`**: Specifies the number of columns a cell should span.
-   - **`rowspan`**: Specifies the number of rows a cell should span.
-   - **`align`**: Specifies the horizontal alignment of the cell's content.
-   - **`valign`**: Specifies the vertical alignment of the cell's content.
-   - **`bgcolor`**: Specifies the background color of the cell.
-
-   ```html
-   <td colspan="2" rowspan="2" align="center" valign="middle" bgcolor="#e0e0e0">Cell content</td>
-   ```
-
-### Caption and Table Grouping
-
- **`<caption>`**: Defines a table caption.
-   
-   ```html
-   <caption>Table Caption</caption>
-   ```
-
- **`<thead>`**: Groups the header content in a table.
-   
-   ```html
-   <thead>
-       <!-- Header rows -->
-   </thead>
-   ```
-
- **`<tbody>`**: Groups the body content in a table.
-   
-   ```html
-   <tbody>
-       <!-- Body rows -->
-   </tbody>
-   ```
-
- **`<tfoot>`**: Groups the footer content in a table.
-   
-   ```html
-   <tfoot>
-       <!-- Footer rows -->
-   </tfoot>
-   ```
-#### Example
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTML Table Example</title>
-</head>
-<body>
-    <table border="1" cellpadding="5" cellspacing="0" width="80%" align="center" bgcolor="#ffffff">
-        <caption>Sample Table</caption>
-        <thead>
-            <tr bgcolor="#cccccc">
-                <th scope="col">Header 1</th>
-                <th scope="col">Header 2</th>
-                <th scope="col">Header 3</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td align="center" valign="middle">Row 1, Cell 1</td>
-                <td align="center" valign="middle">Row 1, Cell 2</td>
-                <td align="center" valign="middle">Row 1, Cell 3</td>
-            </tr>
-            <tr bgcolor="#f2f2f2">
-                <td align="center" valign="middle">Row 2, Cell 1</td>
-                <td align="center" valign="middle">Row 2, Cell 2</td>
-                <td align="center" valign="middle">Row 2, Cell 3</td>
-            </tr>
-            <tr>
-                <td align="center" valign="middle">Row 3, Cell 1</td>
-                <td align="center" valign="middle">Row 3, Cell 2</td>
-                <td align="center" valign="middle">Row 3, Cell 3</td>
-            </tr>
-        </tbody>
-        <tfoot>
-            <tr bgcolor="#cccccc">
-                <td colspan="3" align="center">Footer</td>
-            </tr>
-        </tfoot>
-    </table>
-</body>
-</html>
+Tables in HTML can be customized and styled using various attributes that define the appearance, behavior, and structure of the table. By using these attributes, you can control the alignment, borders, spacing, and other properties of the table to create visually appealing and well-organized tables on your web pages.
+
+<AdsComponent />
+
+## Common Table Attributes
+
+The following table lists some of the most commonly used attributes for customizing HTML tables:
+
+| Attribute          | Description                                                     | Example                                      |
+| ------------------ | --------------------------------------------------------------- | -------------------------------------------- |
+| `border`           | Specifies the width of the border around the table.             | `<table border="1"></table>`                 |
+| `cellpadding`      | Defines the space between the cell content and the cell border. | `<table cellpadding="5"></table>`            |
+| `cellspacing`      | Sets the space between cells in the table.                      | `<table cellspacing="10"></table>`           |
+| `width`            | Specifies the width of the table.                               | `<table width="100%"></table>`               |
+| `height`           | Sets the height of the table.                                   | `<table height="200"></table>`               |
+| `align`            | Aligns the table with respect to the surrounding content.       | `<table align="center"></table>`             |
+| `bgcolor`          | Sets the background color of the table.                         | `<table bgcolor="#f0f0f0"></table>`          |
+| `bordercolor`      | Defines the color of the table border.                          | `<table bordercolor="#333333"></table>`      |
+| `bordercolordark`  | Sets the color of the dark border around the table.             | `<table bordercolordark="#000000"></table>`  |
+| `bordercolorlight` | Sets the color of the light border around the table.            | `<table bordercolorlight="#ffffff"></table>` |
+
+## Example: Using Table Attributes
+
+Here is an example that demonstrates how to use table attributes to customize the appearance of an HTML table:
+
+```html title="table-attributes-example.html"
+<table border="1" cellpadding="10" cellspacing="5" width="50%" height="200" align="center" bgcolor="#f0f0f0" bordercolor="#333333" bordercolordark="#000000" bordercolorlight="#ffffff">
+  <tr>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
+  </tr>
+</table>
 ```
-### Key Points 
 
-1. **Structure and Organization**:
-   - Tables allow you to organize data into rows and columns, making it easier to read and understand.
-   - Tags like `<thead>`, `<tbody>`, and `<tfoot>` help in grouping table content logically.
+In the example above, we have applied various attributes to the `<table>` element to customize the appearance of the table. The resulting table will have a border width of `1`, cell padding of `10`, cell spacing of `5`, a width of `50%`, a height of `200`, aligned to the center, with a background color of `#f0f0f0`, and border colors defined.
 
-2. **Appearance Customization**:
-   - Attributes like `border`, `cellpadding`, `cellspacing`, `width`, `height`, `align`, and `bgcolor` allow you to customize the appearance of the table.
-   - Header cells (`<th>`) are styled differently (bold and centered) compared to data cells (`<td>`).
+By using these attributes, you can create visually appealing tables that suit your design requirements and enhance the presentation of tabular data on your web pages.
 
-3. **Accessibility**:
-   - The `scope` attribute in `<th>` helps screen readers understand the table structure, improving accessibility for visually impaired users.
-   - Using `<caption>` to provide a title or description for the table enhances accessibility and understanding.
 
-4. **Alignment and Spanning**:
-   - Attributes like `colspan` and `rowspan` allow cells to span multiple columns or rows, enabling complex table layouts.
-   - `align` and `valign` attributes help in aligning cell content both horizontally and vertically.
-
-### Benefits 
+```html title="table-attributes-example.html"
+<table border="1" cellpadding="10" cellspacing="5" width="50%" height="200" align="center" bgcolor="#f0f0f0" bordercolor="#333333" bordercolordark="#000000" bordercolorlight="#ffffff">
+  <tr>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
+  </tr>
+</table>
+```
 
-1. **Improved Data Presentation**:
-   - Tables make it easy to present large amounts of data in a structured format, improving readability and comprehension.
-   - You can visually separate different sections of data using borders, colors, and spacing.
+In the example above, we have applied various attributes to the `<table>` element to customize the appearance of the table. The resulting table will have a border width of `1`, cell padding of `10`, cell spacing of `5`, a width of `50%`, a height of `200`, aligned to the center, with a background color of `#f0f0f0`, and border colors defined.
 
-2. **Enhanced User Experience**:
-   - Customizing table appearance with attributes enhances the overall look and feel of the webpage, making it more appealing to users.
-   - Proper alignment and spacing ensure that the data is neatly presented, reducing clutter and confusion.
+By using these attributes, you can create visually appealing tables that suit your design requirements and enhance the presentation of tabular data on your web pages.
 
-3. **Accessibility and Usability**:
-   - Well-structured tables with appropriate attributes improve accessibility, ensuring that all users, including those using screen readers, can understand the data.
-   - Using `<caption>` and the `scope` attribute provides additional context, making tables more informative and user-friendly.
+<BrowserWindow url="http://.../table-attributes-example.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}} >
 
-4. **Responsive Design**:
-   - By specifying dimensions (`width`, `height`) and alignments (`align`, `valign`), tables can be made to fit different screen sizes and orientations, supporting responsive web design.
+<table border="1" cellpadding="10" cellspacing="5" width="50%" height="200" align="center" bgcolor="#f0f0f0" bordercolor="#333333" bordercolordark="#000000" bordercolorlight="#ffffff">
+  <tr>
+    <td>Row 1, Cell 1</td>
+    <td>Row 1, Cell 2</td>
+  </tr>
+  <tr>
+    <td>Row 2, Cell 1</td>
+    <td>Row 2, Cell 2</td>
+  </tr>
+</table>
 
-5. **Customization and Flexibility**:
-   - Table attributes provide a high degree of customization, allowing developers to tailor the table's appearance and behavior to suit specific needs and preferences.
-   - Complex table structures can be created using attributes like `colspan` and `rowspan`, enabling the display of intricate data relationships.
+</BrowserWindow>
 
-6. **Consistency and Maintenance**:
-   - Using HTML table attributes helps maintain consistency across different tables within a website, ensuring a uniform look and feel.
-   - Attributes make it easier to apply changes and updates to the table structure and styling, simplifying maintenance.
+## Conclusion
 
-### Conclusion
-HTML table attributes play a crucial role in defining the appearance, behavior, and structure of tables on web pages. By utilizing these attributes, web developers can create tables that are visually appealing and easy to read, with precise control over elements such as borders, spacing, alignment, and background colors. Attributes like `<th>`, `<tr>`, and `<td>` help organize data efficiently, while grouping tags like `<thead>`, `<tbody>`, and `<tfoot>` improve the semantic structure of the table. Understanding and effectively using these attributes ensures that data is presented clearly and professionally, enhancing the overall user experience on a website.
\ No newline at end of file
+In this tutorial, you learned about the common table attributes in HTML that can be used to customize the appearance and structure of tables on web pages. By applying these attributes, you can control the border width, cell padding, cell spacing, width, height, alignment, and background color of tables to create visually appealing and well-organized tables that enhance the presentation of tabular data. Experiment with different attributes to create tables that suit your design requirements and improve the user experience on your website.
\ No newline at end of file
diff --git a/docs/html/tables/table-structure.md b/docs/html/tables/table-structure.md
index 6d53b05a4..96d5f41bc 100644
--- a/docs/html/tables/table-structure.md
+++ b/docs/html/tables/table-structure.md
@@ -5,115 +5,172 @@ sidebar_label: Table Structure
 sidebar_position: 3
 tags: [html, web-development, tables, table-structure]
 description: In this tutorial, you will learn about the structure of tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages.
+keywords: [html tables, html table structure, html table elements, web development, html tutorial]
 ---
 
-Tables are used to display data in rows and columns, making it easier to organize and present information on web pages.
-
-### Basic Elements of an HTML Table
-
-HTML tables are created using the following elements:
-
-- `<table>`: This element defines the table itself.
-- `<tr>`: This element defines a table row.
-- `<th>`: This element defines a header cell in a table (usually displayed as bold and centered).
-- `<td>`: This element defines a standard data cell in a table.
-
-### Creating a Simple HTML Table
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTML Table Example</title>
-</head>
-<body>
-
-    <table border="1">
-        <thead>
-            <tr>
-                <th>Header 1</th>
-                <th>Header 2</th>
-                <th>Header 3</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Row 1, Cell 1</td>
-                <td>Row 1, Cell 2</td>
-                <td>Row 1, Cell 3</td>
-            </tr>
-            <tr>
-                <td>Row 2, Cell 1</td>
-                <td>Row 2, Cell 2</td>
-                <td>Row 2, Cell 3</td>
-            </tr>
-            <tr>
-                <td>Row 3, Cell 1</td>
-                <td>Row 3, Cell 2</td>
-                <td>Row 3, Cell 3</td>
-            </tr>
-        </tbody>
-    </table>
-
-</body>
-</html>
+Tables in HTML are used to display data in rows and columns, making it easier to organize and present information on web pages. Tables consist of multiple elements that define the structure and appearance of the table, including rows, columns, headers, and cells. Understanding the structure of tables is essential for creating well-formatted and accessible tables in HTML.
+
+<AdsComponent />
+
+## What is a Table in HTML?
+
+A table in HTML is a structured grid of rows and columns used to display data in an organized format. Tables are commonly used to present tabular data, such as financial information, product listings, schedules, and more. Each table consists of the following key components:
+
+1. **Table:** The main container that holds all the table elements.
+2. **Row (`<tr>`):** A horizontal group of cells that represent a single entry or record in the table.
+3. **Header (`<th>`):** A cell that contains header information for a column or row.
+4. **Cell (`<td>`):** A data cell that holds content or data within a row and column.
+5. **Caption (`<caption>`):** An optional element that provides a title or description for the table.
+6. **Column Group (`<colgroup>`):** An element that groups one or more columns for styling or other purposes.
+7. **Column (`<col>`):** Defines the properties for a single column within a column group.
+
+## Table Structure Overview
+
+The following diagram illustrates the basic structure of an HTML table:
+
+```plaintext
++-----------------------------------+
+|          Table (Optional)         |
++-----------------------------------+
+|  Caption (Optional)               |
++-----------------------------------+
+|  Column Group (Optional)          |
++-----------------------------------+
+|  +-----------------------------+  |
+|  |       Header (Optional)     |  |
+|  +-----------------------------+  |
+|  |  Row 1                      |  |
+|  +-----------------------------+  |
+|  |  Row 2                      |  |
+|  +-----------------------------+  |
+|  |  ...                        |  |
+|  +-----------------------------+  |
++-----------------------------------+
 ```
 
-1. **`<table border="1">`**: This starts the table and adds a border around each cell.
-2. **`<thead>`**: This section contains the header row.
-   - **`<tr>`**: Defines a row in the table.
-   - **`<th>`**: Defines header cells in the row.
-3. **`<tbody>`**: This section contains the main body of the table.
-   - **`<tr>`**: Each `<tr>` defines a new row.
-   - **`<td>`**: Each `<td>` defines a cell within a row.
+## Table Elements and Attributes
 
-### Additional Attributes
+HTML tables are created using a combination of elements and attributes that define the structure and appearance of the table. The most commonly used table elements include:
 
-- **`colspan`** and **`rowspan`**: These attributes allow a cell to span multiple columns or rows.
-- **`style`**: Inline CSS can be used to style the table, rows, or cells.
+| Element       | Description                                      | Example                                      |
+|---------------|--------------------------------------------------|----------------------------------------------|
+| `<table>`     | Defines the main table container                 | `<table></table>`                           |
+| `<tr>`        | Represents a row in the table                    | `<tr></tr>`                                  |
+| `<th>`        | Represents a header cell in the table             | `<th>Header</th>`                            |
+| `<td>`        | Represents a data cell in the table               | `<td>Data</td>`                              |
+| `<caption>`   | Provides a title or description for the table     | `<caption>Table Title</caption>`             |
+| `<colgroup>`  | Groups columns in the table for styling           | `<colgroup><col></col></colgroup>`           |
+| `<col>`       | Defines properties for a single column            | `<col style="background-color: lightblue;">` |
 
-#### Example 
+The table elements can be combined to create complex tables with various features such as captions, column groups, and header cells.
 
-Here's an example using `colspan` and `rowspan` to create more complex table structures:
+<AdsComponent />
 
-```html
-<table border="1">
+## Syntax and Examples
+
+### 1. Creating a Basic Table
+
+To create a simple table in HTML, you use the `<table>`, `<tr>`, `<th>`, and `<td>` elements. Here's an example of a basic table with two rows and two columns:
+
+```html title="index.html"
+<table>
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Data 1</td>
+    <td>Data 2</td>
+  </tr>
+</table>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
     <tr>
-        <th>Header 1</th>
-        <th>Header 2</th>
-        <th>Header 3</th>
+      <td>Data 1</td>
+      <td>Data 2</td>
     </tr>
+  </table>
+</BrowserWindow>
+
+### 2. Adding a Caption to a Table
+
+You can add a caption to a table using the `<caption>` element. The caption provides a title or description for the table. Here's an example:
+
+```html title="index.html"
+<table>
+  <caption>Sample Table</caption>
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Data 1</td>
+    <td>Data 2</td>
+  </tr>
+</table>
+```
+
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <caption>Sample Table</caption>
     <tr>
-        <td rowspan="2">Row 1, Cell 1 (spans 2 rows)</td>
-        <td>Row 1, Cell 2</td>
-        <td>Row 1, Cell 3</td>
+      <th>Header 1</th>
+      <th>Header 2</th>
     </tr>
     <tr>
-        <td colspan="2">Row 2, Cell 2 and 3 (spans 2 columns)</td>
+      <td>Data 1</td>
+      <td>Data 2</td>
     </tr>
+  </table>
+</BrowserWindow>
+
+<AdsComponent />
+
+### 3. Grouping Columns in a Table
+
+You can group columns in a table using the `<colgroup>` and `<col>` elements. This allows you to apply styling or other properties to multiple columns. Here's an example:
+
+```html title="index.html"
+<table>
+  <colgroup>
+    <col style="background-color: lightblue;">
+    <col style="background-color: lightgreen;">
+  </colgroup>
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  <tr>
+    <td>Data 1</td>
+    <td>Data 2</td>
+  </tr>
 </table>
 ```
-### Important Points
-
-1. **Organization of Data**: Tables allow for structured organization of data in rows and columns, making it easy to read and interpret.
-2. **Headers for Context**: Using `<th>` elements for headers provides context for the data in each column or row.
-3. **Accessibility**: Properly structured tables improve accessibility for screen readers, helping users with visual impairments.
-4. **Styling**: Tables can be styled with CSS to improve their appearance and make them more visually appealing.
-5. **Responsive Design**: Modern HTML and CSS techniques can make tables responsive, adapting to different screen sizes and devices.
-6. **Tabular Data Representation**: Tables are ideal for representing tabular data like financial reports, schedules, and comparisons.
 
-### Benefits 
+<BrowserWindow url="http://.../index.html" bodyStyle={{backgroundColor: "#fff", color: "#333"}}>
+  <table>
+    <colgroup>
+      <col style={{backgroundColor: "lightblue"}} />
+      <col style={{backgroundColor: "lightgreen"}} />
+    </colgroup>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+    <tr>
+      <td>Data 1</td>
+      <td>Data 2</td>
+    </tr>
+  </table>
+</BrowserWindow>
 
-1. **Clear Data Presentation**: Tables present data clearly and concisely, making it easier for users to understand and analyze information.
-2. **Enhanced Readability**: Well-structured tables enhance readability by aligning data in a logical and organized manner.
-3. **Sorting and Filtering**: JavaScript and CSS can be used to add sorting and filtering capabilities to HTML tables, enhancing user interaction.
-4. **Consistent Layout**: Tables provide a consistent layout for data presentation, ensuring uniformity across different sections of a webpage.
-5. **Easy Data Manipulation**: HTML tables make it easy to manipulate data using JavaScript, enabling dynamic updates and interactive features.
-6. **Better Accessibility**: Tables improve accessibility by providing screen readers with information about the structure and relationships within the data, making it easier for users with disabilities to navigate and understand the content.
-7. **Integration with Other Technologies**: Tables can be easily integrated with other web technologies like CSS for styling and JavaScript for functionality, providing a versatile solution for data presentation.
 
-### Conclusion
+## Conclusion
 
-HTML tables are powerful tools for displaying data in a structured format. By using the basic elements (`<table>`, `<tr>`, `<th>`, and `<td>`), along with attributes like `colspan` and `rowspan`.
\ No newline at end of file
+In this tutorial, you learned about the structure of tables in HTML and how to create tables using various elements and attributes. Tables are a powerful tool for organizing and presenting data on web pages, and understanding their structure is essential for creating well-formatted and accessible tables. Experiment with different table elements and attributes to create tables that suit your design and content needs.
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 787f1eaff..187058b8c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -81,13 +81,13 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       image: "img/codeharborhub-social-card.jpg",
-      announcementBar: {
-        id: "announcementBar",
-        content:
-          '📢 Join our <a target="_blank" href="https://www.whatsapp.com/channel/0029Vah6hro8F2pGUhuAcR0B">WhatsApp Channel</a> for the latest updates and collaboration on exciting projects!',
-        isCloseable: true,
-        backgroundColor: "#4d5061",
-      },
+      // announcementBar: {
+      //   id: "announcementBar",
+      //   content:
+      //     '📢 Join our <a target="_blank" href="https://www.whatsapp.com/channel/0029Vah6hro8F2pGUhuAcR0B">WhatsApp Channel</a> for the latest updates and collaboration on exciting projects!',
+      //   isCloseable: true,
+      //   backgroundColor: "#4d5061",
+      // },
 
       metadata: [
         {