diff --git a/src/components/tables/Table.stories.jsx b/src/components/tables/Table.stories.jsx
new file mode 100644
index 0000000..48f6016
--- /dev/null
+++ b/src/components/tables/Table.stories.jsx
@@ -0,0 +1,178 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Table } from "./Table"
+
+
+export default {
+ component: Table,
+ title: "Tables/Table",
+ decorators: [Decorators.Bluelib],
+ argTypes: {
+ customColor: {
+ control: {type: "color"},
+ },
+ },
+}
+
+
+export const Brothers = props => (
+
+
+ What do the brothers think of the following elements?
+
+
+
+
+
+
+
+ Mario
+
+
+ Luigi
+
+
+
+
+
+
+ Tables
+
+
+ They're cool and allow you to do cool stuff
+
+
+ They need chairs to be useful
+
+
+
+
+ Flexboxes
+
+
+ They're very versatile
+
+
+ Not flexible enough for me
+
+
+
+
+ Grids
+
+
+ They are useful to make layouts
+
+
+ Is this Matrix?
+
+
+
+
+
+
+ Overall
+
+
+ 10/10 would display again
+
+
+ -1/10 pls uninstall dota
+
+
+
+
+)
+Brothers.args = {}
+
+
+export const TicTacToe = props => (
+
+
+ A game of tic-tac-toe.
+
+
+
+
+ O
+
+
+
+
+
+ X
+
+
+
+
+ X
+
+
+ X
+
+
+ O
+
+
+
+
+ X
+
+
+ O
+
+
+
+
+
+
+
+)
+TicTacToe.args = {}
+
+
+export const TierList = props => (
+
+
+ HTML elements tier list
+
+
+
+
+ S
+
+
+ span
+
+
+
+
+ A
+
+
+ a
+
+
+
+
+ B
+
+
+ body
+
+
+
+
+ C
+
+
+ caption
+
+
+
+
+)
+TicTacToe.args = {}
+
+
diff --git a/src/components/tables/Table.tsx b/src/components/tables/Table.tsx
new file mode 100644
index 0000000..52fcbe9
--- /dev/null
+++ b/src/components/tables/Table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface TableProps {
+ [props: string]: any,
+}
+
+
+export function Table({...props}: TableProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table")
+
+ return (
+
+ )
+}
+
+
+interface TableCaptionProps {
+ position: "top" | "bottom",
+
+ [props: string]: any,
+}
+
+
+const TABLE_CAPTION_CLASSES = {
+ top: "table-caption-top",
+ bottom: "table-caption-bottom",
+}
+
+
+Table.Caption = function({position, ...props}: TableCaptionProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-caption", TABLE_CAPTION_CLASSES[position])
+
+ return (
+
+ )
+}
+
+
+interface TableHeaderProps {
+ [props: string]: any,
+}
+
+
+Table.Header = function ({position, ...props}: TableHeaderProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-header")
+
+ return (
+
+ )
+}
+
+
+interface TableBodyProps {
+ [props: string]: any,
+}
+
+
+Table.Body = function ({position, ...props}: TableBodyProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-body")
+
+ return (
+
+ )
+}
+
+
+interface TableFooterProps {
+ [props: string]: any,
+}
+
+
+Table.Footer = function ({position, ...props}: TableFooterProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-footer")
+
+ return (
+
+ )
+}
+
+
+interface TableRowProps {
+ [props: string]: any,
+}
+
+
+Table.Row = function ({...props}: TableRowProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-row")
+
+ return (
+
+ )
+}
+
+
+interface TableCellProps {
+ head?: boolean,
+ mark?: boolean,
+
+ [props: string]: any,
+}
+
+
+Table.Cell = function ({head = false, mark = false, ...props}: TableCellProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, head ? "table-head" : "table-data", mark ? "table-mark" : "")
+
+ return (
+
+ )
+}