Dealogic Styleguide

section menu

Table

Standard table with no interactions, including matrix table variant and skeleton loading style.

Check out supported data grids if you need more interactivity.

Examples

HTML Table

Basic HTML table. Add "dl-table" class to HTML table tag. Add "numeric" class to numeric columns (table header cells and table data cells).

Tranche Curr Tranche Value Local Tranche Value $ Tranche Value Eur Coupon Offer Price Maturity Date Years to Maturity Effective Rating Rank Eligible
Tranche 1 USD 2,250,000,000 2,250,000,000 1,697,216,565 3-mth Libor +153bp 100.0000 15 Sep 2016 2.99 A- Y
Tranche 2 USD 1,750,000,000 1,750,000,000 1,320,057,328 3-mth Libor +175bp 100.0000 14 Sep 2018 4.99 A- Y
Tranche 3 USD 4,250,000,000 4,250,000,000 3,205,853,511 2.5 99.9230 15 Sep 2016 2.99 A- Y
Tranche 4 USD 4,750,000,000 4,750,000,000 3,583,012,748 3.65 99.9960 14 Sep 2018 4.99 A- Y
Tranche 5 USD 4,000,000,000 4,000,000,000 3,017,273,893 4.5 99.8700 15 Sep 2020 6.99 A- Y
Tranche 6 USD 11,000,000,000 11,000,000,000 8,297,503,206 5.15 99.6760 15 Sep 2023 9.99 A- Y
Tranche 7 USD 6,000,000,000 6,000,000,000 4,525,910,840 6.4 99.9000 15 Sep 2033 19.99 A- Y
Tranche 8 USD 15,000,000,000 15,000,000,000 11,314,777,099 6.55 99.8830 15 Sep 2043 29.99 A- Y 
<table class="dl-table">
  <tbody>
    <tr>
      <th>Tranche</th>
      <th class="numeric">Curr</th>
      <th class="numeric">Tranche Value Local</th>
      <th>Tranche Value $</th>
      <th class="numeric">Tranche Value Eur</th>
      <th>Coupon</th>
      <th class="numeric">Offer Price</th>
      <th>Maturity Date</th>
      <th class="numeric">Years to Maturity</th>
      <th>Effective Rating</th>
      <th>Rank Eligible</th>
    </tr>
    <tr>
      <td><a href="#">Tranche 1</a></td>
      <td>USD</td>
      <td class="numeric">2,250,000,000</td>
      <td class="numeric">2,250,000,000</td>
      <td class="numeric">1,697,216,565</td>
      <td>3-mth Libor +153bp</td>
      <td class="numeric">100.0000</td>
      <td>15 Sep 2016</td>
      <td class="numeric">2.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 2</a></td>
      <td>USD</td>
      <td class="numeric">1,750,000,000</td>
      <td class="numeric">1,750,000,000</td>
      <td class="numeric">1,320,057,328</td>
      <td>3-mth Libor +175bp</td>
      <td class="numeric">100.0000</td>
      <td>14 Sep 2018</td>
      <td class="numeric">4.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 3</a></td>
      <td>USD</td>
      <td class="numeric">4,250,000,000</td>
      <td class="numeric">4,250,000,000</td>
      <td class="numeric">3,205,853,511</td>
      <td>2.5</td>
      <td class="numeric">99.9230</td>
      <td>15 Sep 2016</td>
      <td class="numeric">2.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 4</a></td>
      <td>USD</td>
      <td class="numeric">4,750,000,000</td>
      <td class="numeric">4,750,000,000</td>
      <td class="numeric">3,583,012,748</td>
      <td>3.65</td>
      <td class="numeric">99.9960</td>
      <td>14 Sep 2018</td>
      <td class="numeric">4.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 5</a></td>
      <td>USD</td>
      <td class="numeric">4,000,000,000</td>
      <td class="numeric">4,000,000,000</td>
      <td class="numeric">3,017,273,893</td>
      <td>4.5</td>
      <td class="numeric">99.8700</td>
      <td>15 Sep 2020</td>
      <td class="numeric">6.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 6</a></td>
      <td>USD</td>
      <td class="numeric">11,000,000,000</td>
      <td class="numeric">11,000,000,000</td>
      <td class="numeric">8,297,503,206</td>
      <td>5.15</td>
      <td class="numeric">99.6760</td>
      <td>15 Sep 2023</td>
      <td class="numeric">9.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 7</a></td>
      <td>USD</td>
      <td class="numeric">6,000,000,000</td>
      <td class="numeric">6,000,000,000</td>
      <td class="numeric">4,525,910,840</td>
      <td>6.4</td>
      <td class="numeric">99.9000</td>
      <td>15 Sep 2033</td>
      <td class="numeric">19.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a href="#">Tranche 8</a></td>
      <td>USD</td>
      <td class="numeric">15,000,000,000</td>
      <td class="numeric">15,000,000,000</td>
      <td class="numeric">11,314,777,099</td>
      <td>6.55</td>
      <td class="numeric">99.8830</td>
      <td>15 Sep 2043</td>
      <td class="numeric">29.99</td>
      <td>A-</td>
      <td>Y</td>
    </tr>
  </tbody>
</table>

HTML Table - Loading

Basic HTML table. Add "dl-table" class to HTML table tag. Add "numeric" class to numeric columns (table header cells and table data cells). Use empty cell with "loading" class and a span tag to show loading animation.

Tranche Curr Tranche Value Local Tranche Value $ Tranche Value Eur Coupon Offer Price Maturity Date Years to Maturity Effective Rating Rank Eligible 
<table class="dl-table">
  <tbody>
    <tr>
      <th>Tranche</th>
      <th class="numeric">Curr</th>
      <th class="numeric">Tranche Value Local</th>
      <th>Tranche Value $</th>
      <th class="numeric">Tranche Value Eur</th>
      <th>Coupon</th>
      <th class="numeric">Offer Price</th>
      <th>Maturity Date</th>
      <th class="numeric">Years to Maturity</th>
      <th>Effective Rating</th>
      <th>Rank Eligible</th>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
    <tr>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
      <td class="loading"><span /></td>
    </tr>
  </tbody>
</table>

HTML Matrix Table

Basic HTML matrix table. Add "dl-table" and "matrix" classes to HTML table tag. Add "numeric" class to numeric columns (table header cells and table data cells).

Deal Snapshot Local Currency (USD) US Dollars Euro
Deal Value Face 49,000,000,000 49,000,000,000 36,961,605,190
Deal Value Proceeds 48,932,147,500 48,932,147,500 36,910,422,796
Deal Total Value Face 49,000,000,000 49,000,000,000 36,961,605,190
Deal Total Value Proceeds 48,932,147,500 48,932,147,500 36,910,422,796 
<table class="dl-table matrix">
  <tbody>
    <tr>
      <th>Deal Snapshot</th>
      <th class="numeric">Local Currency (USD)</th>
      <th class="numeric">US Dollars</th>
      <th class="numeric">Euro</th>
    </tr>
    <tr>
      <td>Deal Value Face</td>
      <td class="numeric">49,000,000,000</td>
      <td class="numeric">49,000,000,000</td>
      <td class="numeric">36,961,605,190</td>
    </tr>
    <tr>
      <td>Deal Value Proceeds</td>
      <td class="numeric">48,932,147,500</td>
      <td class="numeric">48,932,147,500</td>
      <td class="numeric">36,910,422,796</td>
    </tr>
    <tr>
      <td>Deal Total Value Face</td>
      <td class="numeric">49,000,000,000</td>
      <td class="numeric">49,000,000,000</td>
      <td class="numeric">36,961,605,190</td>
    </tr>
    <tr>
      <td>Deal Total Value Proceeds</td>
      <td class="numeric">48,932,147,500</td>
      <td class="numeric">48,932,147,500</td>
      <td class="numeric">36,910,422,796</td>
    </tr>
  </tbody>
</table>