Blocks
Tables
Users need to see structured data in a manner that makes the data readable, scannable, and comparable.
Default table
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table>
<caption>Monthly budget</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you really need to add widths, use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Table with horizontal dividers
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table class="table">
<caption>Monthly budget</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>Add class table to the <table>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Bordered table
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table class="table-bordered">
<caption>Monthly budget</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>Add class table-bordered to the <table>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Table with striped rows
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table class="table-striped">
<caption>Monthly budget</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>Add class table-striped to the <table>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Table with background colour
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table>
<caption>Monthly budget</caption>
<thead>
<tr class="bg-yellow fg-black">
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>Add classes bg-yellow or fg-black to the <tr>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Table with combinations
| Month | Amount earned | Amount spent | Amount saved |
|---|---|---|---|
| January | £2500 | £1500 | £500 |
| February | £2700 | £1500 | £700 |
<table class="table table-striped">
<caption>Monthly budget</caption>
<thead>
<tr class="bg-pink fg-white">
<th scope="col">Month</th>
<th scope="col">Amount earned</th>
<th scope="col">Amount spent</th>
<th scope="col">Amount saved</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>£2500</td>
<td>£1500</td>
<td>£500</td>
</tr>
<tr>
<th scope="row">February</th>
<td>£2700</td>
<td>£1500</td>
<td>£700</td>
</tr>
</tbody>
</table>Add combinations of classes e.g. table or table-striped to the <table> and bg-pink or fg-white to the <tr>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Responsive table
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
| Name of hall | Location | Accommodation type | Catering | Contract length | 2017/2018 weekly fee | Annual fee |
|---|---|---|---|---|---|---|
| Cheney Student Village | Next to Headington Campus | 750 en suite rooms, arranged in flats of 5 or 6 bedrooms with shared kitchen / living / dining rooms. | Self-catering | 50 weeks | From £140.28 plus £200 deposit | From £6993.96 |
| Clive Booth en suite | 500 yards from Headington Campus | 792 en suite rooms arranged in flats of 5 or 6 bedrooms with shared kitchen / living / dining rooms. 12 two-bedroom family units are also available. |
Self-catering | 38 weeks | £155.26
£248.50 per week for a family flat |
£5877.70 £9407.50 for a family flat |
| Clive Booth Postgraduate Centre | 500 yards from Headington Campus | 364 en suite rooms arranged in flats of 3, 4, 5 or 6 with shared kitchens. For undergraduate students over the age of 21 only. |
Self-catering | 38 or 50 weeks | From £157.57 (depends on flat) | From £5965.15 or £7855.99 |
| Clive Booth non-en suite | 500 yards from Headington Campus | 455 single study-bedrooms arranged in flats of 5 or 6 with shared kitchens and bathrooms. Some of the rooms do not have hand basins and are a lower price. |
Self-catering | 38 weeks | £128.73 (with hand basin) £121.73 (without hand basin) |
£4873.35 with a hand basin £4608.35 without a hand basin |
| Crescent Hall | 1.75 miles from Headington Campus | 306 single study-bedrooms, each with a hand basin, arranged in flats mostly of 6 or 7 with shared kitchens and bathrooms. | Self-catering | 38 weeks | £109.20 | £4134 |
| Friar Court | Marston Road | 30 single-study en suite bedrooms, for nursing and midwifery students only. | Self-catering | 50 weeks | £147.91 | £7374.37 |
| Harcourt Hill Hall N Block | Harcourt Hill Campus | 21 non-en suite, newly refurbished bedrooms. This hall is available to BA Primary students only. | Self-catering | 40 weeks | £135.10 | £6214.60 |
| Lady Spencer Churchill Hall | Wheatley Campus | 162 single study-bedrooms accommodated in four blocks. | Catered during semesters | 38 weeks | £147.42 (with meals) | £5580.90 |
| Paul Kent Hall | 1.5 miles from Headington Campus | 242 single study-bedrooms, most en suite, with shared kitchens allocated to groups of 6 to 9. Most of the rooms are en suite although a small proportion are not. Non-en suite rooms are available to healthcare students only. |
Self-catering | 38 weeks | £136.01 (en suite) £124.18 (non en suite) |
£5148.95 (en suite) £4701.10 (non en suite) |
| Slade Park | 1.5 miles from Headington Campus | Fully furnished flats for 4, 5 or 6 - with fully fitted kitchens, lounge areas and comfy sofas. | Self-catering | 42 weeks | £157.50 (single bedroom) £190 (studio flat) (plus £250 deposit) |
£6615 (single bedroom) £7980 (studio flat) |
| The Mews | Cowley Area | 106 single study bedrooms and 6 studio flats. | Self-catering | 42 weeks | £171.18 (single en suite rooms) £201.93 (studio flats) (Plus £300 reservation fee) |
£7189.56 (single en suite room) £8481.06 (studio flat) |
| Thames Street | Central Oxford | 78 single study, en suite rooms arranged in flats of 8 or 10. | Self-catering | 38 weeks | £157.22 | £5974.36 |
| Warneford Hall | Next to Headington Campus | 249 non-en suite rooms arranged in flats of mostly 6 bedrooms. A mixture of new and returning students allocated into different blocks. Available to one-semester exchange students only. | Self-catering | 38 weeks | £131.39 | £4974.05 |
| Westminster Hall | Harcourt Hill Campus | 262 en suite single study-bedrooms sharing kitchens in groups of 5 or 6 plus 50 self-contained studio apartments available to couples. | Self-catering | 38 weeks | £155.26 (single room) £199.71 (studio flat) |
£5877.70 (single bedroom) £7560.45 (studio flat) |
<div class="table-responsive">
<table class="table table-striped">
<caption>Undergraduate hall options</caption>
<thead>
<tr>
<th scope="col">Name of hall</th>
<th scope="col">Location</th>
<th scope="col">Accommodation type</th>
<th scope="col">Catering</th>
<th scope="col">Contract length</th>
<th scope="col">2017/2018 weekly fee</th>
<th scope="col">Annual fee</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><a href="#">Cheney Student Village</a></td>
<td>Next to Headington Campus</td>
<td>750 en suite rooms, arranged in flats of 5 or 6 bedrooms with shared kitchen / living / dining rooms.</td>
<td>Self-catering</td>
<td>50 weeks</td>
<td>From £140.28 plus £200 deposit</td>
<td>From £6993.96</td>
</tr>
<tr>
<td scope="row"><a href="#">Clive Booth en suite</a> </td>
<td>500 yards from Headington Campus</td>
<td>792 en suite rooms arranged in flats of 5 or 6 bedrooms with shared kitchen / living / dining rooms.<br>
12 two-bedroom family units are also available.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£155.26
<p>£248.50 per week for a family flat</p></td>
<td>£5877.70<br>
£9407.50 for a family flat</td>
</tr>
<tr>
<td scope="row"><a href="#">Clive Booth Postgraduate Centre</a></td>
<td>500 yards from Headington Campus</td>
<td>364 en suite rooms arranged in flats of 3, 4, 5 or 6 with shared kitchens.<br>
For undergraduate students over the age of 21 only.</td>
<td>Self-catering</td>
<td>38 or 50 weeks</td>
<td>From £157.57 (depends on flat)</td>
<td>From £5965.15<br>
or £7855.99</td>
</tr>
<tr>
<td scope="row"><a href="#">Clive Booth non-en suite</a></td>
<td>500 yards from Headington Campus</td>
<td>455 single study-bedrooms arranged in flats of 5 or 6 with shared kitchens and bathrooms.<br>
Some of the rooms do not have hand basins and are a lower price.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£128.73 (with hand basin)<br>
£121.73 (without hand basin)</td>
<td>£4873.35 with a hand basin<br>
£4608.35 without a hand basin</td>
</tr>
<tr>
<td scope="row"><a href="#">Crescent Hall</a></td>
<td>1.75 miles from Headington Campus</td>
<td>306 single study-bedrooms, each with a hand basin, arranged in flats mostly of 6 or 7 with shared kitchens and bathrooms.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£109.20</td>
<td>£4134</td>
</tr>
<tr>
<td scope="row"><a href="#">Friar Court</a></td>
<td>Marston Road</td>
<td>30 single-study en suite bedrooms, for nursing and midwifery students only.</td>
<td>Self-catering</td>
<td>50 weeks</td>
<td>£147.91</td>
<td>£7374.37</td>
</tr>
<tr>
<td scope="row"><a href="#">Harcourt Hill Hall N Block</a></td>
<td>Harcourt Hill Campus</td>
<td>21 non-en suite, newly refurbished bedrooms. This hall is available to BA Primary students only.</td>
<td>Self-catering</td>
<td>40 weeks</td>
<td>£135.10</td>
<td>£6214.60</td>
</tr>
<tr>
<td scope="row"><a href="#">Lady Spencer Churchill Hall</a></td>
<td>Wheatley Campus</td>
<td>162 single study-bedrooms accommodated in four blocks.</td>
<td>Catered during semesters</td>
<td>38 weeks</td>
<td>£147.42 (with meals)</td>
<td>£5580.90</td>
</tr>
<tr>
<td scope="row"><a href="#">Paul Kent Hall</a></td>
<td>1.5 miles from Headington Campus</td>
<td>242 single study-bedrooms, most en suite, with shared kitchens allocated to groups of 6 to 9.<br>
Most of the rooms are en suite although a small proportion are not. Non-en suite rooms are available to healthcare students only.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£136.01 (en suite)<br>
£124.18 (non en suite)</td>
<td>£5148.95 (en suite)<br>
£4701.10 (non en suite)</td>
</tr>
<tr>
<td scope="row"><a href="#">Slade Park</a> </td>
<td>1.5 miles from Headington Campus</td>
<td>Fully furnished flats for 4, 5 or 6 - with fully fitted kitchens, lounge areas and comfy sofas.</td>
<td>Self-catering</td>
<td>42 weeks</td>
<td>£157.50 (single bedroom)<br>
£190 (studio flat)<br>
(plus £250 deposit)</td>
<td>£6615 (single bedroom)<br>
£7980 (studio flat)</td>
</tr>
<tr>
<td scope="row"><a href="#">The Mews</a></td>
<td>Cowley Area</td>
<td>106 single study bedrooms and 6 studio flats.</td>
<td>Self-catering</td>
<td>42 weeks</td>
<td>£171.18 (single en suite rooms)<br>
£201.93 (studio flats)<br>
(Plus £300 reservation fee)</td>
<td>£7189.56 (single en suite room)<br>
£8481.06 (studio flat)</td>
</tr>
<tr>
<td scope="row"><a href="#">Thames Street</a></td>
<td>Central Oxford</td>
<td>78 single study, en suite rooms arranged in flats of 8 or 10.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£157.22</td>
<td>£5974.36</td>
</tr>
<tr>
<td scope="row"><a href="#">Warneford Hall</a></td>
<td>Next to Headington Campus</td>
<td>249 non-en suite rooms arranged in flats of mostly 6 bedrooms. A mixture of new and returning students allocated into different blocks. Available to one-semester exchange students only.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£131.39</td>
<td>£4974.05</td>
</tr>
<tr>
<td scope="row"><a href="#">Westminster Hall</a></td>
<td>Harcourt Hill Campus</td>
<td>262 en suite single study-bedrooms sharing kitchens in groups of 5 or 6 plus 50 self-contained studio apartments available to couples.</td>
<td>Self-catering</td>
<td>38 weeks</td>
<td>£155.26 (single room)<br>
£199.71 (studio flat)</td>
<td>£5877.70 (single bedroom)<br>
£7560.45 (studio flat)</td>
</tr>
</tbody>
</table>
</div>Add combinations of classes e.g. table or table-striped to the <table> and bg-pink or fg-white to the <tr>.
- table attributes such as cellspacing, cellpadding or border should not be used
- use
<thead>and<tbody>to group table headings and data - do not add a width to size cells, let them resize to the device size, if you need to add widths use percentages
- use a caption to indicate the content of that table
- when comparing rows of numbers, align numbers to the right in table cells
- no need for paragraphs unless you need to, use nowrap sparingly
A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please the class sr-only.
Identify row and column headers using <th> for table header cells and <td> for table data cells.
Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.
Changelog
| Added | Updates | Current version | Accessibility | Status |
|---|---|---|---|---|
| 31 August 2016 | 19 July 2017 - Added responsive table 17 October 2016 - Updated tables page |
1.2.0 | Accessible | Current |