Insert custom table into existing content without affecting the current layout

Learn how to insert custom tables into existing content without disrupting layout structure.

To insert a custom table into existing content without affecting the current layout, you can use the Web Component, specifically a custom element that utilizes a template and a slot to render content.

By using a custom element with a templateand a slot, you can create a reusable and flexible component that can be easily inserted into existing content. The slot allows you to project content into the component, and the template defines the structure and layout of the component.

This approach provides several benefits, including:

• Encapsulation: the custom table is encapsulated within the custom element, which means that its styles and layout are isolated from the surrounding content.
• Reusability: the custom element can be reused throughout the application, making it easy to insert the same table into different locations.
• Flexibility: the slot allows you to project different content into the component, making it easy to customize the table for different use cases.

Inserting a custom table into existing content

To insert a custom table into existing content using a Web Component, you would:

• Create a custom element that defines the table structure and layout using a template.
• Use a slot to project the table content into the component.
• Style the component using CSS to ensure that it integrates seamlessly with the surrounding content.
• Insert the custom element into the existing content.

Example implementation

<custom-table>
  <template shadowrootmode="open">
    <slot name="table">

      <table>
        <caption>6 cities in the world with a population exceeding 20 million people in 2025</caption>
        <thead>
          <tr>
            <th>City</th>
            <th>Country</th>
            <th>Population</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tokyo</td>
            <td>Japan</td>
            <td>37,468,000</td>
          </tr>
          <tr>
            <td>Delhi</td>
            <td>India</td>
            <td>28,514,000</td>
          </tr>
          <tr>
            <td>Shanghai</td>
            <td>China</td>
            <td>25,582,000</td>
          </tr>
          <tr>
            <td>São Paulo</td>
            <td>Brazil</td>
            <td>21,650,000</td>
          </tr>
          <tr>
            <td>Mexico City</td>
            <td>Mexico</td>
            <td>21,581,000</td>
          </tr>
          <tr>
            <td>Cairo</td>
            <td>Egypt</td>
            <td>20,076,000</td>
          </tr>
        </tbody>
      </table>

      <style>
        table {
          border-collapse: collapse;
          caption-side: top;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        table caption {
          font-size: 0.9rem;
          text-align: start;
        }

        table thead tr th {
          background-color: #f3f3f3;
          text-align: center;
        }

        table thead tr th,
        table tbody tr td {
          padding: 0.5rem;
        }
      </style>

    </slot>

  </template>
</custom-table>

In this example, the custom element <custom-table> defines a table structure and layout using a template, and a slot is used to project the table content into the component. The custom element is then inserted into existing content, and the table content is projected into the slot.

Live example