Added Table Styling Based on Figma Design for Node.js Website (nodejs…

…#6034)

* Added table styling based on Figma design for both light and dark modes

* added border radius to the table

* indented styles, changed to text-sm, added th & td properties to common selectors

* added HeadlessTable to table story

* simplified  nested tr, td

components/__design__/table.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const Table: StoryObj = {
+  render: () => (
+    <table>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+};
+
+export const HeadlessTable: StoryObj = {
+  render: () => (
+    <table>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;

styles/new/base.css

@@ -41,3 +41,41 @@ ol {
     text-neutral-900
     dark:text-white;
 }
+
+table {
+  @apply w-full 
+    border-separate 
+    border-spacing-0 
+    rounded
+    border
+    border-neutral-200 
+    text-left
+    text-sm 
+    dark:border-neutral-800;
+
+  th,
+  td {
+    @apply border 
+      border-r-0 
+      border-t-0 
+      border-neutral-200
+      px-4
+      py-2 
+      text-neutral-900 
+      dark:border-neutral-800 
+      dark:text-white;
+  }
+
+  th {
+    @apply font-semibold;
+  }
+
+  tr:last-child td {
+    @apply border-b-0;
+  }
+
+  td:first-child,
+  th:first-child {
+    @apply border-l-0;
+  }
+}