diff --git a/packages/fhi-designsystem/src/components/table/docs.mdx b/packages/fhi-designsystem/src/components/table/docs.mdx
new file mode 100644
index 00000000..83c97ce9
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/docs.mdx
@@ -0,0 +1,33 @@
+import { FhiDataTable } from './fhi-data-table/fhi-data-table.component.ts';
+
+import * as FhiDataTableStories from './fhi-data-table/fhi-data-table.stories.ts';
+import * as FhiDataTableRowStories from './fhi-data-table-row/fhi-data-table-row.stories.ts';
+import * as FhiDataTableCellStories from './fhi-data-table-cell/fhi-data-table-cell.stories.ts';
+
+import { Meta, Primary, Canvas, Controls } from '@storybook/addon-docs/blocks';
+
+import { ApiDefinition } from '../../../.storybook/blocks/api-definition.jsx';
+
+<Meta of={FhiDataTableStories} />
+
+# Data Table
+
+Data babell brukes for å presentere data og informasjon på en ryddig måte. Brukeren kan raskt få oversikt og skanne innholdet effektivt.
+
+Tabellen består av rader med celler som inneholder data. Rader defineres med `<fhi-data-table-row>`, og celler med `<fhi-data-table-cell>`.
+
+## Passer til
+
+- Å vise lister med større mengder strukturert data på en måte som er lett å lese og sammenligne.
+
+<Canvas of={FhiDataTableStories.Preview} />
+<Controls of={FhiDataTableStories.Preview} />
+
+## Eksempler
+<Canvas of={FhiDataTableStories.ComplexData} />
+<br />
+<Canvas of={FhiDataTableStories.WithCheckboxes} />
+
+<ApiDefinition of={FhiDataTableStories.Preview} />
+<ApiDefinition of={FhiDataTableRowStories.Preview} />
+<ApiDefinition of={FhiDataTableCellStories.Preview} />
\ No newline at end of file
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.component.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.component.ts
new file mode 100644
index 00000000..be47f983
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.component.ts
@@ -0,0 +1,94 @@
+import { html, css, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export const FhiDataTableCellSelector = 'fhi-data-table-cell';
+
+/**
+ * ## FHI Table Cell
+ *
+ * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}
+ *
+ * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.
+ * It allows users to properly display data within a `<fhi-data-table-row>`.
+ *
+ * The `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.
+ *
+ * @tag fhi-data-table-cell
+ * @element fhi-data-table-cell
+ */
+@customElement(FhiDataTableCellSelector)
+export class FhiDataTableCell extends LitElement {
+  /**
+   * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.
+   * @type {'header' | 'body'}
+   */
+  @property({ type: String, reflect: true })
+  variant: 'header' | 'body' = 'body';
+
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      this.role = this.variant === 'header' ? 'columnheader' : 'cell';
+    }
+
+    super.update(changedProperties);
+  }
+
+  render() {
+    return html`
+      <div class="cell-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      --fhi-data-table-cell-justify-content: unset;
+      --fhi-data-table-cell-align-items: unset;
+
+      --fhi-data-table-cell-border-style: unset;
+      --fhi-data-table-cell-border-width: unset;
+      --fhi-data-table-cell-border-color: unset;
+    }
+
+    :host {
+      --fhi-data-table-cell-justify-content: start;
+      --fhi-data-table-cell-align-items: center;
+
+      display: table-cell;
+
+      padding: var(--fhi-spacing-150);
+      color: var(--fhi-color-neutral-text-default);
+
+      border-style: var(--fhi-data-table-cell-border-style);
+      border-width: var(--fhi-data-table-cell-border-width);
+      border-color: var(--fhi-data-table-cell-border-color);
+
+      .cell-content {
+        display: flex;
+        justify-content: var(--fhi-data-table-cell-justify-content);
+        align-items: var(--fhi-data-table-cell-align-items);
+      }
+    }
+
+    :host([variant='body']) {
+      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
+
+      font: var(--fhi-typography-body-medium-font-weight)
+        var(--fhi-typography-body-medium-font-size) /
+        var(--fhi-typography-body-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+
+    :host([variant='header']) {
+      white-space: nowrap;
+
+      letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
+
+      font: var(--fhi-typography-label-medium-font-weight)
+        var(--fhi-typography-label-medium-font-size) /
+        var(--fhi-typography-label-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+  `;
+}
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.stories.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.stories.ts
new file mode 100644
index 00000000..50b51e10
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.stories.ts
@@ -0,0 +1,45 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { FhiDataTableCell } from './fhi-data-table-cell.component';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { FhiStorybookMeta } from '../../../../.storybook/fhi-meta';
+
+new FhiDataTableCell();
+
+const meta: FhiStorybookMeta<FhiDataTableCell> = {
+  title: 'Komponenter/Table/Cell',
+  component: 'fhi-data-table-cell',
+  parameters: {
+    slotTypes: [
+      {
+        name: '-',
+        description:
+          'Innholdet i cellen. Kan være tekst eller andre HTML-elementer.',
+      },
+    ],
+  },
+  decorators: [],
+  render: args =>
+    html`<fhi-data-table-cell variant="${ifDefined(args.variant)}">
+      374 964
+    </fhi-data-table-cell>`,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['header', 'body'],
+      description:
+        'Definerer om cellen er en header eller body celle. Når <fhi-data-table-cell> brukes i en header <fhi-data-table-row>, vil variant automatisk bli satt til header.',
+      defaultValue: { summary: 'body' },
+    },
+  },
+};
+
+type Story = StoryObj<FhiDataTableCell>;
+
+export const Preview: Story = {
+  tags: ['!dev'],
+  args: {},
+};
+
+export default meta;
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.test.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.test.ts
new file mode 100644
index 00000000..27f6ffc9
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-cell/fhi-data-table-cell.test.ts
@@ -0,0 +1,60 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { FhiDataTableCell } from './fhi-data-table-cell.component';
+import { FhiDataTableRow } from '../fhi-data-table-row/fhi-data-table-row.component';
+import { FhiDataTable } from '../fhi-data-table/fhi-data-table.component';
+
+describe('fhi-data-table-cell', () => {
+  new FhiDataTableCell();
+  new FhiDataTableRow();
+  new FhiDataTable();
+
+  let component: FhiDataTableCell;
+
+  describe('accessibility', () => {
+    beforeEach(async () => {
+      component = await fixture(
+        html`<fhi-data-table-cell></fhi-data-table-cell>`,
+      );
+    });
+
+    it('is accessible when it has a correct parent structure', async () => {
+      const table = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row>
+            <fhi-data-table-cell></fhi-data-table-cell>
+          </fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const cell = table.querySelector('fhi-data-table-cell');
+      await expect(cell).to.be.accessible();
+    });
+
+    it('is not accessible when it does not have a correct parent', async () => {
+      await expect(component).not.to.be.accessible();
+    });
+
+    it('should have the role "cell" by default', async () => {
+      expect(component.getAttribute('role')).to.equal('cell');
+    });
+
+    it('should have the role "columnheader" when variant is set to "header"', async () => {
+      component.variant = 'header';
+      await component.updateComplete;
+
+      expect(component.getAttribute('role')).to.equal('columnheader');
+    });
+  });
+
+  describe('setting attributes', () => {
+    it('has an attribute to set the variant', async () => {
+      component = await fixture(
+        html`<fhi-data-table-cell variant="header"></fhi-data-table-cell>`,
+      );
+
+      expect(component.getAttribute('variant')).to.equal('header');
+      expect(component.variant).to.equal('header');
+    });
+  });
+});
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.component.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.component.ts
new file mode 100644
index 00000000..c34c56a7
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.component.ts
@@ -0,0 +1,110 @@
+import { html, css, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';
+
+export const FhiDataTableRowSelector = 'fhi-data-table-row';
+
+/**
+ * ## FHI Table Row
+ *
+ * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs}
+ *
+ * The `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.
+ * It allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.
+ *
+ * For various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.
+ *
+ * @tag fhi-data-table-row
+ * @element fhi-data-table-row
+ */
+@customElement(FhiDataTableRowSelector)
+export class FhiDataTableRow extends LitElement {
+  /**
+   * Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.
+   * If the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.
+   * @type {'header' | 'body'}
+   */
+  @property({ type: String, reflect: true })
+  variant: 'header' | 'body' = 'body';
+
+  @queryAssignedElements()
+  slotElements!: Array<HTMLElement>;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.role = 'row';
+  }
+
+  protected update(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      if (this.variant !== 'body' && this.variant !== 'header') {
+        this.variant = 'body';
+      }
+    }
+
+    super.update(changedProperties);
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('variant')) {
+      this.setCellVariants();
+    }
+
+    super.updated(changedProperties);
+  }
+
+  private handleSlotChange() {
+    this.setCellVariants();
+  }
+
+  private setCellVariants() {
+    this.slotElements.forEach(element => {
+      if (element.tagName.toLowerCase() === 'fhi-data-table-cell') {
+        const tableCell = element as FhiDataTableCell;
+
+        if (tableCell.variant !== this.variant) {
+          tableCell.variant = this.variant;
+        }
+      }
+    });
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+
+  static styles = css`
+    :host {
+      --fhi-data-table-row-border-style: unset;
+      --fhi-data-table-row-border-width: unset;
+      --fhi-data-table-row-border-color: unset;
+
+      --fhi-data-table-row-background: unset;
+    }
+
+    :host {
+      display: table-row;
+      background: var(--fhi-data-table-row-background);
+
+      --fhi-data-table-row-border-style: none none solid none;
+      --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);
+      --fhi-data-table-row-border-color: var(
+        --fhi-color-neutral-surface-active
+      );
+
+      ::slotted(fhi-data-table-cell) {
+        --fhi-data-table-cell-background: var(--fhi-data-table-row-background);
+        --fhi-data-table-cell-border-style: var(
+          --fhi-data-table-row-border-style
+        );
+        --fhi-data-table-cell-border-width: var(
+          --fhi-data-table-row-border-width
+        );
+        --fhi-data-table-cell-border-color: var(
+          --fhi-data-table-row-border-color
+        );
+      }
+    }
+  `;
+}
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.stories.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.stories.ts
new file mode 100644
index 00000000..acf795ed
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.stories.ts
@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import { FhiDataTableRow } from './fhi-data-table-row.component';
+
+import { FhiStorybookMeta } from '../../../../.storybook/fhi-meta';
+
+new FhiDataTableRow();
+
+const meta: FhiStorybookMeta<FhiDataTableRow> = {
+  title: 'Komponenter/Table/Row',
+  component: 'fhi-data-table-row',
+  parameters: {
+    slotTypes: [
+      {
+        name: '-',
+        description:
+          'Alle celler i raden. Bruk <fhi-data-table-cell> for å definere celler i raden.',
+      },
+    ],
+  },
+  decorators: [],
+  render: () => html`<fhi-data-table-row></fhi-data-table-row>`,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['header', 'body'],
+      description:
+        'Definerer om raden er en header-rad eller en vanlig rad. Header-rader har en annen stil og brukes for å definere kolonneoverskrifter. Alle <fhi-data-table-cell> elementer i en header <fhi-data-table-row> vil automatisk få variant satt til header.',
+      defaultValue: { summary: 'body' },
+    },
+  },
+};
+
+type Story = StoryObj<FhiDataTableRow>;
+
+export const Preview: Story = {
+  tags: ['!dev'],
+  args: {},
+};
+
+export default meta;
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.test.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.test.ts
new file mode 100644
index 00000000..9b321e93
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table-row/fhi-data-table-row.test.ts
@@ -0,0 +1,123 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { FhiDataTable } from '../fhi-data-table/fhi-data-table.component';
+import { FhiDataTableRow } from './fhi-data-table-row.component';
+import { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';
+
+describe('fhi-data-table-row', () => {
+  new FhiDataTable();
+  new FhiDataTableRow();
+  new FhiDataTableCell();
+
+  let component: FhiDataTableRow;
+
+  describe('accessibility', () => {
+    beforeEach(async () => {
+      component = await fixture(
+        html`<fhi-data-table-row></fhi-data-table-row>`,
+      );
+    });
+
+    it("should have the 'row' role", async () => {
+      expect(component.getAttribute('role')).to.equal('row');
+    });
+
+    it('is accessible when it has a correct parent and child structure', async () => {
+      component = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row>
+            <fhi-data-table-cell></fhi-data-table-cell>
+          </fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const row = component.querySelector('fhi-data-table-row');
+      await expect(row).to.be.accessible();
+    });
+
+    it('is not accessible when it does not have a correct parent', async () => {
+      component = await fixture(
+        html` <fhi-data-table-row>
+          <fhi-data-table-cell></fhi-data-table-cell>
+        </fhi-data-table-row>`,
+      );
+
+      await expect(component).not.to.be.accessible();
+    });
+
+    it('is not accessible when it does not have a correct child', async () => {
+      component = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row></fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const row = component.querySelector('fhi-data-table-row');
+      await expect(row).not.to.be.accessible();
+    });
+  });
+
+  describe('setting attributes', () => {
+    it('has an attribute to set the variant', async () => {
+      component = await fixture(
+        html`<fhi-data-table-row variant="header"></fhi-data-table-row>`,
+      );
+
+      expect(component.getAttribute('variant')).to.equal('header');
+      expect(component.variant).to.equal('header');
+    });
+  });
+
+  describe('propagation of properties', () => {
+    it('should set the variant of child fhi-data-table-cell elements to match its own variant', async () => {
+      component = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row variant="header">
+            <fhi-data-table-cell></fhi-data-table-cell>
+            <fhi-data-table-cell variant="body"></fhi-data-table-cell>
+          </fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const cells = component.querySelectorAll<FhiDataTableCell>(
+        'fhi-data-table-row fhi-data-table-cell',
+      );
+
+      cells.forEach(cell => {
+        expect(cell.getAttribute('variant')).to.equal('header');
+        expect(cell.variant).to.equal('header');
+      });
+    });
+
+    it('should update the variant of child fhi-data-table-cell elements when its own variant changes', async () => {
+      component = await fixture(
+        html` <fhi-data-table>
+          <fhi-data-table-row variant="header">
+            <fhi-data-table-cell></fhi-data-table-cell>
+            <fhi-data-table-cell></fhi-data-table-cell>
+          </fhi-data-table-row>
+        </fhi-data-table>`,
+      );
+
+      const row = component.querySelector(
+        'fhi-data-table-row',
+      ) as FhiDataTableRow;
+      const cells = component.querySelectorAll<FhiDataTableCell>(
+        'fhi-data-table-row fhi-data-table-cell',
+      );
+
+      cells.forEach(cell => {
+        expect(cell.getAttribute('variant')).to.equal('header');
+        expect(cell.variant).to.equal('header');
+      });
+
+      row.variant = 'body';
+      await row.updateComplete;
+
+      cells.forEach(cell => {
+        expect(cell.getAttribute('variant')).to.equal('body');
+        expect(cell.variant).to.equal('body');
+      });
+    });
+  });
+});
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.component.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.component.ts
new file mode 100644
index 00000000..9e10484f
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.component.ts
@@ -0,0 +1,144 @@
+import { html, css, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import '../../fhi-grid/fhi-grid.component';
+import '../../typography/fhi-body/fhi-body.component';
+
+export const FhiDataTableSelector = 'fhi-data-table';
+
+/**
+ * ## FHI Table
+ *
+ * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}
+ *
+ * The `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.
+ * It allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.
+ *
+ * The `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.
+ *
+ * Example usage:
+ * ```html
+ * <fhi-data-table caption="Example Table" columns="2fr 1fr 1fr">
+ *   <fhi-data-table-row variant="header">
+ *     <fhi-data-table-cell>Header 1</fhi-data-table-cell>
+ *     <fhi-data-table-cell>Header 2</fhi-data-table-cell>
+ *     <fhi-data-table-cell>Header 3</fhi-data-table-cell>
+ *   </fhi-data-table-row>
+ *  <fhi-data-table-row>
+ *    <fhi-data-table-cell>Data 1</fhi-data-table-cell>
+ *    <fhi-data-table-cell>Data 2</fhi-data-table-cell>
+ *    <fhi-data-table-cell>Data 3</fhi-data-table-cell>
+ *  </fhi-data-table-row>
+ * </fhi-data-table>
+ * ```
+ *
+ * @tag fhi-data-table
+ * @element fhi-data-table
+ */
+@customElement(FhiDataTableSelector)
+export class FhiDataTable extends LitElement {
+  /**
+   * The caption of the table. This should provide a brief description of the table's content.
+   * @type {string}
+   */
+  @property({ type: String, reflect: true })
+  caption?: string;
+
+  /**
+   * If set to true, the table will have alternating row colors (striped effect) for better readability.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  striped?: boolean;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.role = 'table';
+  }
+
+  protected update(changedProperties: PropertyValues): void {
+    super.update(changedProperties);
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('caption')) {
+      if (this.caption) {
+        this.setAttribute('aria-label', this.caption);
+      } else {
+        this.removeAttribute('aria-label');
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="table-content">
+        <slot></slot>
+      </div>
+      ${this.caption
+        ? html`<fhi-body class="caption" size="small"
+            >${this.caption}</fhi-body
+          >`
+        : null}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      --fhi-data-table-caption-width: unset;
+
+      --fhi-data-table-border-style: unset;
+      --fhi-data-table-border-width: unset;
+      --fhi-data-table-border-color: unset;
+      --fhi-data-table-border-radius: unset;
+    }
+
+    :host {
+      --fhi-data-table-border-style: solid;
+      --fhi-data-table-border-width: var(--fhi-dimension-border-width);
+      --fhi-data-table-border-color: var(--fhi-color-neutral-surface-active);
+      --fhi-data-table-border-radius: var(--fhi-border-radius-100);
+
+      color: var(--fhi-color-neutral-text-default);
+
+      .caption {
+        display: block;
+        padding: var(--fhi-spacing-150);
+        width: var(--fhi-data-table-caption-width);
+      }
+
+      .table-content {
+        display: table;
+        width: 100%;
+        overflow: hidden;
+        border-style: var(--fhi-data-table-border-style);
+        border-width: var(--fhi-data-table-border-width);
+        border-color: var(--fhi-data-table-border-color);
+        border-radius: var(--fhi-data-table-border-radius);
+      }
+
+      ::slotted(fhi-data-table-row:last-child) {
+        --fhi-data-table-row-border-style: none none none none;
+        --fhi-data-table-row-border-width: unset;
+        --fhi-data-table-row-border-color: unset;
+      }
+    }
+
+    :host([striped]) {
+      ::slotted(fhi-data-table-row:nth-child(even)) {
+        --fhi-data-table-row-background: var(
+          --fhi-color-neutral-background-subtle
+        );
+      }
+
+      ::slotted(fhi-data-table-row:nth-child(odd)) {
+        --fhi-data-table-row-background: var(
+          --fhi-color-neutral-background-default
+        );
+      }
+    }
+  `;
+}
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.stories.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.stories.ts
new file mode 100644
index 00000000..c73a9b3e
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.stories.ts
@@ -0,0 +1,255 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+
+import { FhiDataTable } from './fhi-data-table.component';
+import { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';
+import { FhiDataTableRow } from '../fhi-data-table-row/fhi-data-table-row.component';
+
+import { FhiCheckbox } from '../../fhi-checkbox/fhi-checkbox.component';
+import { FhiButton } from '../../fhi-button/fhi-button.component';
+
+import { FhiDisplay } from '../../typography/fhi-display/fhi-display.component';
+import { FhiTitle } from '../../typography/fhi-title/fhi-title.component';
+import { FhiBody } from '../../typography/fhi-body/fhi-body.component';
+
+import { FhiIconEye } from '../../icons/fhi-icon-eye.component';
+import { FhiIconDownload } from '../../icons/fhi-icon-download.component';
+import { FhiIconTrash } from '../../icons/fhi-icon-trash.component';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { FhiStorybookMeta } from '../../../../.storybook/fhi-meta';
+
+new FhiDataTable();
+new FhiDataTableCell();
+new FhiDataTableRow();
+new FhiCheckbox();
+new FhiButton();
+new FhiIconEye();
+new FhiIconDownload();
+new FhiIconTrash();
+
+new FhiDisplay();
+new FhiTitle();
+new FhiBody();
+
+const meta: FhiStorybookMeta<FhiDataTable> = {
+  title: 'Komponenter/Data Table',
+  component: 'fhi-data-table',
+  parameters: {
+    slotTypes: [
+      {
+        name: '-',
+        description:
+          'Alle rader i tabellen. Bruk <fhi-data-table-row> for å definere rader, og <fhi-data-table-cell> for å definere celler i radene.',
+      },
+    ],
+  },
+  decorators: [],
+  argTypes: {
+    caption: {
+      control: 'text',
+      description:
+        'Valgfri tekst som beskriver innholdet. Dette fungerer som tabellen sin tittel og er visuelt plassert under tabellen',
+      defaultValue: { summary: undefined },
+    },
+    striped: {
+      control: 'boolean',
+      description: 'Om tabellen skal ha vekslende radfarger (stripete effekt).',
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+type Story = StoryObj<FhiDataTable>;
+
+export const Preview: Story = {
+  tags: [],
+  args: {
+    caption: 'Total forekomst: Utvalgte diagnoser, antall',
+    striped: false,
+  },
+  render: args => html`
+    <fhi-data-table
+      caption="${ifDefined(args.caption)}"
+      ?striped="${args.striped}"
+    >
+      <fhi-data-table-row variant="header">
+        <fhi-data-table-cell></fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          2021
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          2022
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          2023
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell> Pasienter totalt </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          374 964
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          383 347
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          392 106
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell>
+          Sykdommer i sirkulasjonssystemet (I00-I99)
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          279 726
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          289 149
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          291 655
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+    </fhi-data-table>
+  `,
+};
+
+export const ComplexData: Story = {
+  tags: ['!dev'],
+  args: {
+    striped: true,
+  },
+  render: args => html`
+    <fhi-title size="large" level="2">
+      P0a: Fødte per måned og mors bosted (med og uten fødselsmelding i MFR)
+    </fhi-title>
+    <br />
+    <fhi-body>
+      Foreløpige tall kan endres ved senere oppdateringer. Tabellen inkluderer
+      fødte med fødselsmelding i MFR, som har fødselsvekt ≥ 500 gram og/eller
+      svangerskapet har vart ≥ 22 uker. Tabellen viser i tillegg fødte uten
+      fødselsmelding i MFR basert på informasjon fra Folkeregisteret¹.
+    </fhi-body>
+    <br />
+
+    <fhi-data-table
+      caption="${ifDefined(args.caption)}"
+      ?striped="${args.striped}"
+    >
+      <fhi-data-table-row variant="header">
+        <fhi-data-table-cell> Oslo </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          Januar
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          Februar
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          Mars
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          April
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell> Alle fødte </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          685
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell> Med fødselsmelding </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          662
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell> Uten fødselsmelding </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          23
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          -
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+    </fhi-data-table>
+  `,
+};
+
+export const WithCheckboxes: Story = {
+  tags: ['!dev'],
+  args: {
+    caption: 'Avkrysningsbokser.',
+    striped: false,
+  },
+  render: args => html`
+    <fhi-data-table
+      caption="${ifDefined(args.caption)}"
+      ?striped="${args.striped}"
+    >
+      <fhi-data-table-row variant="header">
+        <fhi-data-table-cell></fhi-data-table-cell>
+        <fhi-data-table-cell> Mal </fhi-data-table-cell>
+        <fhi-data-table-cell> Dimensjon </fhi-data-table-cell>
+        <fhi-data-table-cell> Opprettet </fhi-data-table-cell>
+        <fhi-data-table-cell> Opprettet av </fhi-data-table-cell>
+        <fhi-data-table-cell> </fhi-data-table-cell>
+      </fhi-data-table-row>
+
+      <fhi-data-table-row>
+        <fhi-data-table-cell>
+          <fhi-checkbox></fhi-checkbox>
+        </fhi-data-table-cell>
+        <fhi-data-table-cell> Geografi 2020 </fhi-data-table-cell>
+        <fhi-data-table-cell> ATC_Verdi </fhi-data-table-cell>
+        <fhi-data-table-cell> 10.10.2027 </fhi-data-table-cell>
+        <fhi-data-table-cell> Pelle Parafin </fhi-data-table-cell>
+        <fhi-data-table-cell style="--fhi-data-table-cell-justify-content: end">
+          <fhi-button color="neutral" variant="text">
+            <fhi-icon-download></fhi-icon-download>
+            Eksportèr
+          </fhi-button>
+          <fhi-button color="neutral" variant="text">
+            <fhi-icon-eye></fhi-icon-eye>
+            Vis
+          </fhi-button>
+          <fhi-button color="neutral" variant="text">
+            <fhi-icon-trash></fhi-icon-trash>
+          </fhi-button>
+        </fhi-data-table-cell>
+      </fhi-data-table-row>
+    </fhi-data-table>
+  `,
+};
+
+export default meta;
diff --git a/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.test.ts b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.test.ts
new file mode 100644
index 00000000..82d450c5
--- /dev/null
+++ b/packages/fhi-designsystem/src/components/table/fhi-data-table/fhi-data-table.test.ts
@@ -0,0 +1,50 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { FhiDataTable } from './fhi-data-table.component';
+
+describe('fhi-data-table', () => {
+  new FhiDataTable();
+
+  let component: FhiDataTable;
+
+  describe('accessibility', () => {
+    beforeEach(async () => {
+      component = await fixture(html`<fhi-data-table></fhi-data-table>`);
+    });
+
+    it('is accessible', async () => {
+      await expect(component).to.be.accessible();
+    });
+
+    it('should have the role "table"', async () => {
+      expect(component.getAttribute('role')).to.equal('table');
+    });
+
+    it('should have an aria-label if caption attribute is set', async () => {
+      component.caption = 'Table Caption';
+      await component.updateComplete;
+
+      expect(component.getAttribute('aria-label')).to.equal('Table Caption');
+    });
+  });
+
+  describe('setting attributes', () => {
+    it('has an attribute to set the caption', async () => {
+      component = await fixture(
+        html`<fhi-data-table caption="Table Caption"></fhi-data-table>`,
+      );
+
+      expect(component.getAttribute('caption')).to.equal('Table Caption');
+      expect(component.caption).to.equal('Table Caption');
+    });
+
+    it('has an attribute to set striped', async () => {
+      component = await fixture(
+        html`<fhi-data-table striped></fhi-data-table>`,
+      );
+
+      expect(component.hasAttribute('striped')).to.equal(true);
+      expect(component.striped).to.equal(true);
+    });
+  });
+});