diff --git a/src/components/ContentNode.vue b/src/components/ContentNode.vue
index 1e046f9c2..05c41b40f 100644
--- a/src/components/ContentNode.vue
+++ b/src/components/ContentNode.vue
@@ -114,7 +114,19 @@ function renderNode(createElement, references) {
     ))
   ));
 
-  const renderTableChildren = (rows, headerStyle = TableHeaderStyle.none) => {
+  const renderTableCell = (
+    element, attrs, data, cellIndex, rowIndex, extendedData,
+  ) => {
+    const { colspan, rowspan } = extendedData[`${rowIndex}_${cellIndex}`] || {};
+    // if either is `0`, then its spanned over and should not be rendered
+    if (colspan === 0 || rowspan === 0) return null;
+    return createElement(element, { attrs: { ...attrs, colspan, rowspan } }, (
+      renderChildren(data)
+    ));
+  };
+
+  const renderTableChildren = (rows, headerStyle = TableHeaderStyle.none, extendedData = {}) => {
+    // build the matrix for the array
     switch (headerStyle) {
     // thead with first row and th for each first row cell
     // tbody with rows where first cell in each row is th, others are td
@@ -122,21 +134,15 @@ function renderNode(createElement, references) {
       const [firstRow, ...otherRows] = rows;
       return [
         createElement('thead', {}, [
-          createElement('tr', {}, firstRow.map(cell => (
-            createElement('th', { attrs: { scope: 'col' } }, (
-              renderChildren(cell)
-            ))
+          createElement('tr', {}, firstRow.map((cell, cellIndex) => (
+            renderTableCell('th', { scope: 'col' }, cell, cellIndex, 0, extendedData)
           ))),
         ]),
-        createElement('tbody', {}, otherRows.map(([firstCell, ...otherCells]) => (
+        createElement('tbody', {}, otherRows.map(([firstCell, ...otherCells], rowIndex) => (
           createElement('tr', {}, [
-            createElement('th', { attrs: { scope: 'row' } }, (
-              renderChildren(firstCell)
-            )),
-            ...otherCells.map(cell => (
-              createElement('td', {}, (
-                renderChildren(cell)
-              ))
+            renderTableCell('th', { scope: 'row' }, firstCell, 0, rowIndex + 1, extendedData),
+            ...otherCells.map((cell, cellIndex) => (
+              renderTableCell('td', {}, cell, cellIndex + 1, rowIndex + 1, extendedData)
             )),
           ])
         ))),
@@ -145,15 +151,11 @@ function renderNode(createElement, references) {
     // tbody with rows, th for first cell of each row, td for other cells
     case TableHeaderStyle.column:
       return [
-        createElement('tbody', {}, rows.map(([firstCell, ...otherCells]) => (
+        createElement('tbody', {}, rows.map(([firstCell, ...otherCells], rowIndex) => (
           createElement('tr', {}, [
-            createElement('th', { attrs: { scope: 'row' } }, (
-              renderChildren(firstCell)
-            )),
-            ...otherCells.map(cell => (
-              createElement('td', {}, (
-                renderChildren(cell)
-              ))
+            renderTableCell('th', { scope: 'row' }, firstCell, 0, rowIndex, extendedData),
+            ...otherCells.map((cell, cellIndex) => (
+              renderTableCell('td', {}, cell, cellIndex + 1, rowIndex, extendedData)
             )),
           ])
         ))),
@@ -164,17 +166,13 @@ function renderNode(createElement, references) {
       const [firstRow, ...otherRows] = rows;
       return [
         createElement('thead', {}, [
-          createElement('tr', {}, firstRow.map(cell => (
-            createElement('th', { attrs: { scope: 'col' } }, (
-              renderChildren(cell)
-            ))
+          createElement('tr', {}, firstRow.map((cell, cellIndex) => renderTableCell(
+            'th', { scope: 'col' }, cell, cellIndex, 0, extendedData,
           ))),
         ]),
-        createElement('tbody', {}, otherRows.map(row => (
-          createElement('tr', {}, row.map(cell => (
-            createElement('td', {}, (
-              renderChildren(cell)
-            ))
+        createElement('tbody', {}, otherRows.map((row, rowIndex) => (
+          createElement('tr', {}, row.map((cell, cellIndex) => (
+            renderTableCell('td', {}, cell, cellIndex, rowIndex + 1, extendedData)
           )))
         ))),
       ];
@@ -183,12 +181,10 @@ function renderNode(createElement, references) {
       // tbody with all rows and every cell is td
       return [
         createElement('tbody', {}, (
-          rows.map(row => (
+          rows.map((row, rowIndex) => (
             createElement('tr', {}, (
-              row.map(cell => (
-                createElement('td', {}, (
-                  renderChildren(cell)
-                ))
+              row.map((cell, cellIndex) => (
+                renderTableCell('td', {}, cell, cellIndex, rowIndex, extendedData)
               ))
             ))
           ))
@@ -268,8 +264,12 @@ function renderNode(createElement, references) {
         return renderFigure(node);
       }
 
-      return createElement(Table, {}, (
-        renderTableChildren(node.rows, node.header)
+      return createElement(Table, {
+        props: {
+          spanned: !!node.extendedData,
+        },
+      }, (
+        renderTableChildren(node.rows, node.header, node.extendedData)
       ));
     case BlockType.termList:
       return createElement('dl', {}, node.items.map(({ term, definition }) => [
diff --git a/src/components/ContentNode/Table.vue b/src/components/ContentNode/Table.vue
index 965ea7f08..b3d653013 100644
--- a/src/components/ContentNode/Table.vue
+++ b/src/components/ContentNode/Table.vue
@@ -9,11 +9,23 @@
 -->
 
 <template>
-  <div class="table-wrapper"><table><slot /></table></div>
+  <div class="table-wrapper">
+    <table :class="{ spanned }">
+      <slot />
+    </table>
+  </div>
 </template>
 
 <script>
-export default { name: 'Table' };
+export default {
+  name: 'Table',
+  props: {
+    spanned: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -35,6 +47,10 @@ export default { name: 'Table' };
   -webkit-overflow-scrolling: touch;
 }
 
+table {
+  border-style: hidden;
+}
+
 /deep/ {
   th {
     font-weight: $font-weight-semibold;
@@ -44,7 +60,7 @@ export default { name: 'Table' };
   th {
     border-color: var(--color-fill-gray-tertiary);
     border-style: solid;
-    border-width: 1px 0;
+    border-width: var(--table-border-width, 1px 1px);
     padding: rem(10px);
   }
 }
diff --git a/tests/unit/components/ContentNode.spec.js b/tests/unit/components/ContentNode.spec.js
index 8dcba2448..a48875cda 100644
--- a/tests/unit/components/ContentNode.spec.js
+++ b/tests/unit/components/ContentNode.spec.js
@@ -1181,6 +1181,7 @@ describe('ContentNode', () => {
       });
       const table = wrapper.find('.content').find(Table);
       expect(table.exists()).toBe(true);
+      expect(table.props('spanned')).toBe(false);
       expect(table.contains('thead')).toBe(false);
       expect(table.findAll('tbody tr').length).toBe(2);
       expect(table.findAll('tbody tr td').length).toBe(4);
@@ -1253,75 +1254,236 @@ describe('ContentNode', () => {
       expect(caption.text()).toContain('blah');
     });
 
-    describe('with type="termList"', () => {
-      it('renders a <dl> with <dt>/<dd> pairs for each term/definition', () => {
+    describe('and column/row spanning', () => {
+      // <table>
+      //   <tr>
+      //     <td colspan="2">row0col0</td>
+      //     <td>row0col2</td>
+      //   </tr>
+      //   <tr>
+      //     <td>row1col0</td>
+      //     <td>row1col1</td>
+      //     <td rowspan="2">row1col2</td>
+      //   </tr>
+      //   <tr>
+      //     <td>row2col0</td>
+      //     <td>row2col1</td>
+      //   </tr>
+      // </table>
+      const rowsExtended = [
+        [
+          [{ type: 'text', text: 'row0col0' }],
+          [{ type: 'text', text: 'row0col1' }],
+          [{ type: 'text', text: 'row0col2' }],
+        ],
+        [
+          [{ type: 'text', text: 'row1col0' }],
+          [{ type: 'text', text: 'row1col1' }],
+          [{ type: 'text', text: 'row1col2' }],
+        ],
+        [
+          [{ type: 'text', text: 'row2col0' }],
+          [{ type: 'text', text: 'row2col1' }],
+          [{ type: 'text', text: 'row2col2' }],
+        ],
+      ];
+      const extendedData = {
+        '0_0': { colspan: 2 },
+        '0_1': { colspan: 0 },
+        '1_2': { rowspan: 2 },
+        '2_2': { rowspan: 0 },
+      };
+
+      it('renders header="none" style table, with spans', () => {
         const wrapper = mountWithItem({
-          type: 'termList',
-          items: [
-            {
-              term: {
-                inlineContent: [
-                  {
-                    type: 'text',
-                    text: 'Foo',
-                  },
-                ],
-              },
-              definition: {
-                content: [
-                  {
-                    type: 'paragraph',
-                    inlineContent: [
-                      {
-                        type: 'text',
-                        text: 'foo',
-                      },
-                    ],
-                  },
-                ],
-              },
-            },
-            {
-              term: {
-                inlineContent: [
-                  {
-                    type: 'text',
-                    text: 'Bar',
-                  },
-                ],
-              },
-              definition: {
-                content: [
-                  {
-                    type: 'paragraph',
-                    inlineContent: [
-                      {
-                        type: 'text',
-                        text: 'bar',
-                      },
-                    ],
-                  },
-                ],
-              },
-            },
-          ],
+          type: 'table',
+          header: TableHeaderStyle.none,
+          rows: rowsExtended,
+          extendedData,
         });
-        const dl = wrapper.find('.content dl');
-        expect(dl.exists()).toBe(true);
+        const table = wrapper.find('.content').find(Table);
+        expect(table.html()).toMatchInlineSnapshot(`
+          <table-stub spanned="true">
+            <tbody>
+              <tr>
+                <td colspan="2">row0col0</td>
+                <td>row0col2</td>
+              </tr>
+              <tr>
+                <td>row1col0</td>
+                <td>row1col1</td>
+                <td rowspan="2">row1col2</td>
+              </tr>
+              <tr>
+                <td>row2col0</td>
+                <td>row2col1</td>
+              </tr>
+            </tbody>
+          </table-stub>
+        `);
+      });
 
-        const terms = dl.findAll('dt');
-        expect(terms.length).toBe(2);
+      it('renders header="both" style table, with spans', () => {
+        const wrapper = mountWithItem({
+          type: 'table',
+          header: TableHeaderStyle.both,
+          rows: rowsExtended,
+          extendedData,
+        });
+        const table = wrapper.find('.content').find(Table);
+        expect(table.html()).toMatchInlineSnapshot(`
+          <table-stub spanned="true">
+            <thead>
+              <tr>
+                <th scope="col" colspan="2">row0col0</th>
+                <th scope="col">row0col2</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">row1col0</th>
+                <td>row1col1</td>
+                <td rowspan="2">row1col2</td>
+              </tr>
+              <tr>
+                <th scope="row">row2col0</th>
+                <td>row2col1</td>
+              </tr>
+            </tbody>
+          </table-stub>
+        `);
+      });
 
-        const definitions = dl.findAll('dd');
-        expect(definitions.length).toBe(2);
+      it('renders header="row" style table, with spans', () => {
+        const wrapper = mountWithItem({
+          type: 'table',
+          header: TableHeaderStyle.row,
+          rows: rowsExtended,
+          extendedData,
+        });
+        const table = wrapper.find('.content').find(Table);
+        expect(table.html()).toMatchInlineSnapshot(`
+          <table-stub spanned="true">
+            <thead>
+              <tr>
+                <th scope="col" colspan="2">row0col0</th>
+                <th scope="col">row0col2</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>row1col0</td>
+                <td>row1col1</td>
+                <td rowspan="2">row1col2</td>
+              </tr>
+              <tr>
+                <td>row2col0</td>
+                <td>row2col1</td>
+              </tr>
+            </tbody>
+          </table-stub>
+        `);
+      });
 
-        expect(terms.at(0).text()).toBe('Foo');
-        expect(definitions.at(0).contains('p')).toBe(true);
-        expect(definitions.at(0).text()).toBe('foo');
-        expect(terms.at(1).text()).toBe('Bar');
-        expect(definitions.at(1).contains('p')).toBe(true);
-        expect(definitions.at(1).text()).toBe('bar');
+      it('renders header="column" style table, with spans', () => {
+        const wrapper = mountWithItem({
+          type: 'table',
+          header: TableHeaderStyle.column,
+          rows: rowsExtended,
+          extendedData,
+        });
+        const table = wrapper.find('.content').find(Table);
+        expect(table.html()).toMatchInlineSnapshot(`
+          <table-stub spanned="true">
+            <tbody>
+              <tr>
+                <th scope="row" colspan="2">row0col0</th>
+                <td>row0col2</td>
+              </tr>
+              <tr>
+                <th scope="row">row1col0</th>
+                <td>row1col1</td>
+                <td rowspan="2">row1col2</td>
+              </tr>
+              <tr>
+                <th scope="row">row2col0</th>
+                <td>row2col1</td>
+              </tr>
+            </tbody>
+          </table-stub>
+        `);
+      });
+    });
+  });
+
+  describe('with type="termList"', () => {
+    it('renders a <dl> with <dt>/<dd> pairs for each term/definition', () => {
+      const wrapper = mountWithItem({
+        type: 'termList',
+        items: [
+          {
+            term: {
+              inlineContent: [
+                {
+                  type: 'text',
+                  text: 'Foo',
+                },
+              ],
+            },
+            definition: {
+              content: [
+                {
+                  type: 'paragraph',
+                  inlineContent: [
+                    {
+                      type: 'text',
+                      text: 'foo',
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+          {
+            term: {
+              inlineContent: [
+                {
+                  type: 'text',
+                  text: 'Bar',
+                },
+              ],
+            },
+            definition: {
+              content: [
+                {
+                  type: 'paragraph',
+                  inlineContent: [
+                    {
+                      type: 'text',
+                      text: 'bar',
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        ],
       });
+      const dl = wrapper.find('.content dl');
+      expect(dl.exists()).toBe(true);
+
+      const terms = dl.findAll('dt');
+      expect(terms.length).toBe(2);
+
+      const definitions = dl.findAll('dd');
+      expect(definitions.length).toBe(2);
+
+      expect(terms.at(0).text()).toBe('Foo');
+      expect(definitions.at(0).contains('p')).toBe(true);
+      expect(definitions.at(0).text()).toBe('foo');
+      expect(terms.at(1).text()).toBe('Bar');
+      expect(definitions.at(1).contains('p')).toBe(true);
+      expect(definitions.at(1).text()).toBe('bar');
     });
   });
 
diff --git a/tests/unit/components/ContentNode/Table.spec.js b/tests/unit/components/ContentNode/Table.spec.js
index f4425b342..4288c9375 100644
--- a/tests/unit/components/ContentNode/Table.spec.js
+++ b/tests/unit/components/ContentNode/Table.spec.js
@@ -21,4 +21,15 @@ describe('Table', () => {
     expect(table.exists()).toBe(true);
     expect(table.contains('tbody tr td')).toBe(true);
   });
+
+  it('renders a table with `spanned` class', () => {
+    const wrapper = shallowMount(Table, {
+      slots: { default: '<tbody><tr><td>foo</td></tr></tbody>' },
+      propsData: {
+        spanned: true,
+      },
+    });
+    const table = wrapper.find('table');
+    expect(table.classes('spanned')).toBe(true);
+  });
 });