columns instead of table

Author: lindalu-MSFT

docs/overview/core-concepts-office-add-ins.md

@@ -26,7 +26,7 @@ For the best foundation for these common features and application-specific imple
    :::column span="":::
        :::image type="icon" source="../images/i_best-practices_small.svg":::
    :::column-end:::
-   :::column span="":::
+   :::column span="3":::
        **Plan**</br>
        [Learn the best practices and system requirements for Office Add-ins.](../concepts/add-in-development-best-practices.md)
    :::column-end:::
@@ -35,7 +35,7 @@ For the best foundation for these common features and application-specific imple
    :::column span="":::
        :::image type="icon" source="../images/i_code-blocks_small.svg":::
    :::column-end:::
-   :::column span="":::
+   :::column span="3":::
        **Develop**</br>
        [Learn the APIs and patterns to develop Office Add-ins.](../develop/develop-overview.md)
    :::column-end:::
@@ -44,7 +44,7 @@ For the best foundation for these common features and application-specific imple
    :::column span="":::
        :::image type="icon" source="../images/i_recommended-testing_small.svg":::
    :::column-end:::
-   :::column span="":::
+   :::column span="3":::
        **Test and debug**</br>
        [Learn how to test and debug Office Add-ins.](../testing/test-debug-office-add-ins.md)
    :::column-end:::
@@ -53,7 +53,7 @@ For the best foundation for these common features and application-specific imple
    :::column span="":::
        :::image type="icon" source="../images/i_deploy_small.svg":::
    :::column-end:::
-   :::column span="":::
+   :::column span="3":::
        **Publish**</br>
        [Learn how to deploy and publish Office Add-ins.](../publish/publish.md)
    :::column-end:::
@@ -62,7 +62,7 @@ For the best foundation for these common features and application-specific imple
    :::column span="":::
        :::image type="icon" source="../images/i_reference_small.svg":::
    :::column-end:::
-   :::column span="":::
+   :::column span="3":::
        **Reference**</br>
        [View the reference documentation for the Office JavaScript APIs, the add-ins manifest, error code lists, and more.](../reference/javascript-api-for-office.md)
    :::column-end:::

docs/reference/javascript-api-for-office.md

@@ -19,9 +19,27 @@ You should use application-specific APIs whenever feasible, and use Common APIs
 
 ## API reference
 
-|                           |                      |                 |
-| :------------------------ | -------------------- | ----------------|
-| <img src="../images/index/logo-excel.svg" width="100" alt="Excel API reference"> </br>**Excel API reference**</br>[JavaScript APIs for building Excel add-ins](/javascript/api/excel).  | <img src="../images/index/logo-outlook.svg" width="100" alt="Outlook API reference"> </br>**Outlook API reference**</br>[JavaScript APIs for building Outlook add-ins](/javascript/api/outlook). | <img src="../images/index/logo-word.svg" width="100" alt="Word API reference"> </br>**Word API reference**</br>[JavaScript APIs for building Word add-ins](/javascript/api/word). |
-| <img src="../images/index/logo-powerpoint.svg" width="100" alt="PowerPoint API reference"> </br>**PowerPoint API reference**</br>[JavaScript APIs for building PowerPoint add-ins](/javascript/api/powerpoint).  | <img src="../images/index/logo-onenote.svg" width="100" alt="OneNote API reference"> </br>**OneNote API reference**</br>[JavaScript APIs for building OneNote add-ins](/javascript/api/onenote). | <img src="../images/index/logo-office.png" width="100" alt="Common API reference"> </br>**Common API reference**</br>[JavaScript APIs that can be used by any Office Add-in](/javascript/api/office). |
+:::row:::
+   :::column span="":::
+        <img src="../images/index/logo-excel.svg" width="100" alt="Excel API reference"> </br>**Excel API reference**</br>[JavaScript APIs for building Excel add-ins](/javascript/api/excel).
+   :::column-end:::
+   :::column span="":::
+        <img src="../images/index/logo-outlook.svg" width="100" alt="Outlook API reference"> </br>**Outlook API reference**</br>[JavaScript APIs for building Outlook add-ins](/javascript/api/outlook).
+   :::column-end:::
+   :::column span="":::
+        <img src="../images/index/logo-word.svg" width="100" alt="Word API reference"> </br>**Word API reference**</br>[JavaScript APIs for building Word add-ins](/javascript/api/word).
+   :::column-end:::
+:::row-end:::
+:::row:::
+   :::column span="":::
+        <img src="../images/index/logo-powerpoint.svg" width="100" alt="PowerPoint API reference"> </br>**PowerPoint API reference**</br>[JavaScript APIs for building PowerPoint add-ins](/javascript/api/powerpoint).
+   :::column-end:::
+   :::column span="":::
+      <img src="../images/index/logo-onenote.svg" width="100" alt="OneNote API reference"> </br>**OneNote API reference**</br>[JavaScript APIs for building OneNote add-ins](/javascript/api/onenote).
+   :::column-end:::
+   :::column span="":::
+      <img src="../images/index/logo-office.png" width="100" alt="Common API reference"> </br>**Common API reference**</br>[JavaScript APIs that can be used by any Office Add-in](/javascript/api/office).
+   :::column-end:::
+:::row-end:::
 
 **Note**: There's currently no application-specific JavaScript API for Project; you'll use Common APIs to create Project add-ins.