Table Cell

<sl-table-cell> | SlTableCell
Since 2.0 experimental

Short summary of the component’s intended use.

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 
<table style="border-collapse: collapse;">
  <thead>
    <tr>
      <th is-heading>Header 1</th>
      <th is-heading>Header 2</th>
      <th is-heading>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><sl-table-cell>Row 1, Cell 1</sl-table-cell></td>
      <td><sl-table-cell>Row 1, Cell 2</sl-table-cell></td>
      <td><sl-table-cell>Row 1, Cell 3</sl-table-cell></td>
    </tr>
    <tr>
      <td><sl-table-cell>Row 2, Cell 1</sl-table-cell></td>
      <td><sl-table-cell>Row 2, Cell 2</sl-table-cell></td>
      <td><sl-table-cell>Row 2, Cell 3</sl-table-cell></td>
    </tr>
  </tbody>
</table>

Examples

First Example

Second Example

TODO

[component-metadata:sl-table-cell]

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Events

Name React Event Description Event Detail
sl-event-name Emitted as an example. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>