Markdown

Webflow HTML Tables

Many of us have felt the impact of Webflow not having built-in HTML table support.

Traditionally, content creators resorted to using images of tables, which posed significant SEO drawbacks, as search engine bots couldn't read these images like text. Moreover, text within images often appeared too small on mobile devices, compromising usability.

This guide is for web developers and designers who want to overcome these limitations by creating responsive, SEO-friendly tables. We'll guide you through adding the Showdown library to your project, applying custom CSS for responsive design, and importing tables from Google Docs into Webflow.

By using Markdown, you'll ensure that your tables not only look great on all devices but also contribute to better SEO. Whether enhancing a blog or building a sophisticated website, this tutorial will help you effectively present data and organize content in Webflow.
‍
you can clone this site page here

Pros and Cons of using a table vs using images of tables:
| Aspect | Using Images | Live Tables | |:--- |:--- |:--- | | SEO Optimization | Poor SEO as search engine bots can't read text in images. | Excellent for SEO as the text is readable by search engine bots. | | Responsiveness | Often not responsive; text may appear too small on mobile. | Highly responsive; adjusts to different screen sizes effectively. | | Accessibility | Lower accessibility, as text in images is not screen-reader friendly. | Higher accessibility, as text is readable by screen readers. | | Data Updation | Updating data is cumbersome; requires editing the image. | Easier to update; text can be edited directly. | | Load Time | Can increase page load times, especially with multiple images. | Generally lighter, leading to faster page loading. | | User Interaction | Static, offering no user interaction. | Can include interactive elements like sorting and filtering. | | Visual Customization | Limited to the design of the image. | High customization through CSS. | | Usability | Text clarity can be an issue, especially on varying screen sizes. | Text remains clear and legible across devices. | | Maintenance | Higher maintenance, especially with changes or corrections. | Lower maintenance, updates can be made easily in the source code. |
1. Add Showdown library to your project:
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
2. Cofigure and Initialize Showdown instance
<script>

document.addEventListener('DOMContentLoaded', function () {

  // Initialize markdown converter
  let converter = new showdown.Converter({
    tables: true, // allow tables
    noHeaderId: true,
    headerLevelStart: 2,
    literalMidWordUnderscores: true
  });

  // Find <markdown> elements
  let markdowns = document.querySelectorAll('markdown');
  markdowns.forEach((el) => {

    el.outerHTML = converter.makeHtml(el.innerHTML);

  });

});

</script>
3. Add CSS Styles:
 <style>
 
 /* table header cell style */
   th {
      padding: 10px;
      margin-bottom: 5px;
      background-color: #a4d937;
      color: #2b2b2b;
      margin-right: 10px;
      font-weight: 500;
      text-align: inherit;
    }
    
    
 /* table regular (data) cell style */
   td {
      padding: 10px;
      background-color: #2b2b2b;
    }
    
    table {
      background-color: #1d1d1d;
      border-collapse: separate;
      border-spacing: 2px 2px;
      line-height: 1.4
    }
    

 /* smaller breakpoints font size */
    @media (max-width: 1250px){
      table{
        font-size: 1rem
      }
    }
    
    @media (max-width: 700px){
      table{
        font-size: 0.7rem
      }
    }
   
/* avoid flash of unstyled content */

   markdown {
      display: none;
    }

  </style>
4. Copy Table From your Google Doc
5. Paste inside Markdown table Generator


This tool helps us convert regular tables to markdown syntax, here is the link

1. Paste the table inside the tool
2. generate the markdown format
3. copy the new formatting to clipboard

6. Bring Markdown table into Webflow Rich Text

Add a custom code element and paste the table inside <markdown> tag

<markdown>

table content

</markdown>
7. Publish and enjoy!

This table lives inside a rich text block

| Tag | Meaning | Usage | |:--- |:--- |:--- | | table | Table Element | Defines the table structure. | | thead | Table Head | Groups header content in a table. | | tbody | Table Body | Groups the main content in a table. | | tfoot | Table Foot | Groups the footer content in a table. | | tr | Table Row | Defines a row in a table. | | th | Table Header Cell | Defines a header cell in a table. | | td | Table Data Cell | Defines a cell in a table that contains data. | | col | Table Column | Specifies column properties within a colgroup. | | colgroup | Table Column Group | Specifies a group of one or more columns in a table for formatting. | | caption | Table Caption | Defines a title for the table. |

‍

‍

‍

Made with love, Gushon.com. clone here