Add table guidance documentation

Signed-off-by: Soham Babrekar <soham.babrekar@gmail.com>

Author: Sohamsig

src/collections/sistent/components/table/guidance.mdx

@@ -1,99 +1,59 @@
 ---
 title: Table Guidance
 component: table
-description: Tables are used to organize and present structured data clearly and efficiently.
+description: Guidelines and best practices for using tables effectively.
 ---
 
-import Table from "../../../../components/ConformanceTest-Table"
-
-Tables help users scan, compare, and understand structured data. Proper usage ensures readability, accessibility, and efficient information delivery.
-
-<a id="Function">
-  <h2>Function</h2>
-</a>
-
-Tables are used when structured data needs to be displayed clearly. They help users compare values, understand relationships, and analyze information efficiently.
-
-<h3>Data Table</h3>
-
-Data tables are used to display structured information in rows and columns.
-
-<Row className="image-container">
-  <ThemeWrapper>
-    <Table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Role</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>User 1</td>
-          <td>Contributor</td>
-          <td>Active</td>
-        </tr>
-      </tbody>
-    </Table>
-  </ThemeWrapper>
-</Row>
-
-<h3>Compact Table</h3>
-
-Compact tables are used when space is limited or when displaying large datasets.
-
-<Row className="image-container">
-  <ThemeWrapper>
-    <Table size="small">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Role</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>User 1</td>
-          <td>Contributor</td>
-        </tr>
-      </tbody>
-    </Table>
-  </ThemeWrapper>
-</Row>
-
-<a id="Layout">
-  <h2>Layout</h2>
-</a>
-
-Tables should maintain consistent spacing and alignment to improve readability.
-
-### Column Alignment
-
-- Left align text content  
-- Right align numeric values  
-- Center align status indicators  
-
-### Row Spacing
-
-Maintain consistent row spacing to ensure clarity and readability.
-
-<a id="Best Practices">
-  <h2>Best Practices</h2>
-</a>
-
-- Use headers for clarity  
-- Avoid overcrowding columns  
-- Keep rows readable  
-- Use pagination for large datasets  
-- Use sorting where applicable  
-- Maintain consistent spacing  
-
-<a id="Accessibility">
-  <h2>Accessibility</h2>
-</a>
-
-- Use semantic table elements  
-- Provide clear headers  
-- Maintain contrast for readability  
-- Ensure keyboard navigation support  
+## Function
+
+Tables are used to organize structured data into rows and columns. They help users quickly scan, compare, and understand information.
+
+Tables are useful for:
+
+- Presenting structured data
+- Comparing multiple values
+- Displaying logs and metrics
+- Listing users or resources
+
+---
+
+## Usage
+
+Use tables when:
+
+- Data must be compared
+- Information is structured
+- Users need quick scanning
+- Displaying rows and columns
+
+Avoid using tables when:
+
+- Content is mostly text
+- Layout is simple
+- Data does not require comparison
+
+---
+
+## Best Practices
+
+Follow these best practices when using tables:
+
+- Use clear headers
+- Avoid too many columns
+- Keep rows readable
+- Use pagination for large datasets
+- Maintain consistent spacing
+
+### Use Clear Headers
+
+Always include headers for better readability.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Role</th>
+    </tr>
+  </thead>
+</table>