HomeElements

Table

Generic table to be used for tabular data.

Table Default

Subtitle showing 5 of 5
Caption Title
Heading1 Heading2 Heading3 Heading4 Heading5
Cell Cell Cell with more text that wraps on 2nd line maybe... Or not... Depends on your breakpoint... Cell
Cell Cell Cell Cell Cell 
Cell Cell Cell Cell Link
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Lorem ipsum sit dolor amet
External link
 
<!-- table -->
<table class="ui-table">

  <!-- (optional) caption for table title -->
  <caption class="ui-table__caption">
    <div class="ui-table__subtitle">...</div>
    <div class="ui-table__title">...</div>
  </caption>

  <!-- (optional) colgroup to apply column width  -->
  <colgroup>
    <col width="40%">
    <col>
    <col>
  </colgroup>

  <!-- (optional) header -->
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>

  <!-- body -->
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>

  <!-- (optional) custom footnote -->
  <!-- any content can be created here using "ui-" component classes -->
  <tbody class="ui-table__footnote">
    <tr>
      <td colspan="3">
        <div class="ui-row">
          <div class="ui-col ui-col--1-3">...</div>
          <div class="ui-col ui-col--2-3 ui-col--align-right">
            <a class="ui-link" href="#">...</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>

  <!-- (optional) footer -->
  <tfoot>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tfoot>

</table>

Table External HTML Content

Caption Title
Heading1 Heading2 Heading3 Heading4
Cell Cell with more text that wraps on 2nd line maybe... Cell
Cell Cell Cell Link
Cell Cell Cell Cell
Footer1 Footer2 Footer3 Footer4 
<!-- table from external content -->
<div class="ui-raw-html">
  <table>
    <caption>...</caption>
    <colgroup>...</colgroup>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </table>
</div>
Refinitiv © 2020