A good solution for creating tables in a Jekyll website is to use data files, such as YAML, JSON, or CSV, to store your table data separately. This approach allows you to manage your data independently from your layout and content, making it easier to update and maintain.

Here’s a basic workflow:

  1. Create a Data File: Store your table data in _data directory. For example, create a file named table_data.yml:

    - name: John Doe
      age: 30
      occupation: Developer
    - name: Jane Smith
      age: 25
      occupation: Designer
    
  2. Access Data in a Template: Use Liquid templating to loop through the data and generate a table in your HTML:

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Occupation</th>
        </tr>
      </thead>
      <tbody>
           
      </tbody>
    </table>
    

This method keeps your data organized and your templates clean, making it easier to manage and update your tables.

To include a column with checkboxes that can be either true or false, you can modify your data file to include a boolean field and adjust your template to render checkboxes based on this field. Here’s how you can do it:

  1. Update the Data File: Add a boolean field, such as checked, to your data entries in _data/table_data.yml:

    - name: John Doe
      age: 30
      occupation: Developer
      checked: true
    - name: Jane Smith
      age: 25
      occupation: Designer
      checked: false
    
  2. Modify the Template: Update your HTML template to include a checkbox in the table, setting its checked attribute based on the boolean value:

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Occupation</th>
          <th>Checked</th>
        </tr>
      </thead>
      <tbody>
           
      </tbody>
    </table>
    

In this setup, the checked attribute is conditionally added to the checkbox input based on the value of person.checked. The disabled attribute is used to prevent user interaction, as Jekyll-generated sites are static and cannot handle form submissions or state changes without additional client-side scripting.


This site uses Just the Docs, a documentation theme for Jekyll.