The LB Redbridge design system.

Table

Use the table component to make information easier to compare and scan for users.
This is a customised adaptive table specifically for LB Redbridge - it is based on GDS but the table layout changes for smaller devices.
GDS guidelines on using this component (opens in a new window)


Responsive table with related content underneath (full width)
Date Rate for vehicles Rate for bicycles
£109.80 per week jack and jill went up the hill to fetch a pale of water and then came straight back downjack and jill went up the hill to fetch a pale of water and then came straight back down £59.10 per week
£109.80 per week £109.80 per week £59.10 per week
£109.80 per week £109.80 per week £59.10 per week


HTML Code ↕  

                    
                      
<table class="govuk-table redbridge-table">
  <caption class="govuk-table__caption govuk-table__caption--m">Responsive table with related content underneath (full width)</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header app-custom-class">Date</th>
      <th scope="col" class="govuk-table__header app-custom-class">Rate for vehicles</th>
      <th scope="col" class="govuk-table__header app-custom-class">Rate for bicycles</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">jack and jill went up the hill to fetch a pale of water and then came straight back downjack and jill went up the hill to fetch a pale of water and then came straight back down</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
  </tbody>
</table>

Responsive table with related content aligned right (full width)
Date Rate for vehicles Rate for bicycles
£109.80 per week jack and jill went up the hill to fetch a pale of water and then came straight back downjack and jill went up the hill to fetch a pale of water and then came straight back down £59.10 per week
£109.80 per week £109.80 per week £59.10 per week
£109.80 per week £109.80 per week £59.10 per week


HTML Code ↕  

                    
                      
<table class="govuk-table redbridge-table text-right">
  <caption class="govuk-table__caption govuk-table__caption--m">Responsive table with related content aligned right (full width)</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header app-custom-class">Date</th>
      <th scope="col" class="govuk-table__header app-custom-class">Rate for vehicles</th>
      <th scope="col" class="govuk-table__header app-custom-class">Rate for bicycles</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">jack and jill went up the hill to fetch a pale of water and then came straight back downjack and jill went up the hill to fetch a pale of water and then came straight back down</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell" data-label="Date">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for vehicles">£109.80 per week</td>
      <td class="govuk-table__cell" data-label="Rate for bicycles">£59.10 per week</td>
    </tr>
  </tbody>
</table>