Blog

Signals Blog

The Structure-Data Grid in HTML

Grids make it easy to inspect large numbers of chemical structures and associated data quickly. HTML offers many powerful ways to generate these grids, one of the best being the <table> element. Although <table> won't do exactly what we want visually by default, a bit of CSS solves this problem.

This article shows how to create a well-formatted grid suitable for displaying structure-datasets in which each cell contains a chemical structure image and associated data.

The Structure-Data Grid

The effect we're after is one in which each cell in the grid is spaced evenly from its neighbors. At the same time, the left and right columns are flush with the page margin. Cell width is set automatically based on the number of columns - not by a hard-coded value.

Structure-Data Grid
Structure-Data Grid. Left and right columns are aligned flush with the black horizontal top line. Cell widths dynamically adjust based on the number of columns.

Sample Code

We begin with a 5x1 table with enough markup and styling to make cells and structures visible.

Table-Based Structure-Data Grid
<!DOCTYPE html>
<html>
  <head>
    <title>Blank Table-Based Grid</title>
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
  </head>
  <style>
    body { font-family: monospace; }
    h1 { border-bottom: 4px solid black; font-size: 260%; }
    table { width: 100%; border-collapse: collapse; border-style: hidden; table-layout: fixed; }
    td { border: 10px solid transparent; }
    tr { height: 200px; }
    .page { width: 930px; margin: 0 auto; }
    .cell { background-color: #c0c0c0; text-align: center; padding: 10px; }
    .image { height: 100px; background-color: white; margin-bottom: 10px;}
    .data { font-size: 180%; }
  </style>
  <body>
    <div class="page">
      <h1>Results</h1>
      <table>
        <tbody>
          <tr>
            <td>
              <div class="cell">
                <div class="image"><div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-2.mol"></div></div>
                <div class="data">Data</div>
              </div>
            </td>
            <td>
              <div class="cell">
                <div class="image"><div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-3.mol"></div></div>
                <div class="data">Data</div>
              </div>
            </td>
            <td>
              <div class="cell">
                <div class="image"><div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-4.mol"></div></div>
                <div class="data">Data</div>
              </div>
            </td>
            <td>
              <div class="cell">
                <div class="image"><div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-5.mol"></div></div>
                <div class="data">Data</div>
              </div>
            </td>
            <td>
              <div class="cell">
                <div class="image"><div data-chemwriter-ui="image" data-chemwriter-src="http://chemwriter.com/data/structure-6.mol"></div></div>
                <div class="data">Data</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Although the table styling is somewhat involved, the most important styles are defined in lines 11 and 12. Spacing between cells is achieved by using a transparent border around each <td> element. Likewise, setting the border-style of the table itself removes the outer gap that would otherwise be present.

This demo uses the ChemWriter Image component to render chemical structures. Source files are fetched asynchronously from another domain using ChemWriter's built-in cross-origin request sharing (CORS) capability.

Conclusions

The <table> element is capable of generating highly-functional structure-data grid displays. The key is to apply a transparent border around each cell and suppress rendering of the table's own border.