@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
216 lines (186 loc) • 6.24 kB
Markdown
# Table Layout
'.table-layout' can be applied to divs to make them appear as tables assuming the structure below if followed.
An example of using aria-labelledby to ensure accessibility functionality works well is also included.
__Expected behaviour when using a screen reader:__ Tab to a control. Screen Reader should read the Sales Pitch
Heading, then the related sales pitch, then the heading of the inputs column before described the input and
it's state.
First checkbox in table: _"Sales Pitch. Our sleeping bags have a 4-cm layer of insulation. Attribute. Checkbox not checked"_
Second checkbox in table: _"Sales Pitch. Our sleeping bags have a 4-cm layer of insulation. Benefit. Checkbox not checked"_
## Example
<div class="table-layout" style="--columns: 3;">
<div class="row-headings">
<div id="col-1-1">Sales pitch</div>
<div id="col-1-2">Attribute</div>
<div id="col-1-3">Benefit</div>
</div>
<div>
<div>
<label id="label-1-1">Our sleeping bags have a 4-cm layer of insulation.</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-1 col-1-2" type="checkbox" id="input-1-1">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-1 col-1-3" type="checkbox" id="input-1-2">
</div>
</div>
<div>
<div>
<label id="label-1-2">
Using our sleeping bags will enable you to wake up rested and ready for a day of activities.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-2 col-1-2" type="checkbox" id="input-1-3">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-2 col-1-3" type="checkbox" id="input-1-4">
</div>
</div>
<div>
<div>
<label id="label-1-3">
Our coffee meets international sustainability standards.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-3 col-1-2" type="checkbox" id="input-1-5">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-3 col-1-3" type="checkbox" id="input-1-6">
</div>
</div>
<div>
<div>
<label id="label-1-4">
With every cup of coffee, you are supporting the future supply of high quality sustainably sourced
coffee trade.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-4 col-1-2" type="checkbox" id="input-1-6">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-4 col-1-3" type="checkbox" id="input-1-8">
</div>
</div>
<div>
<div>
<label id="label-1-7">
Step into the heart of British colonial Burma with George Orwell's “Burmese Days”. This powerful novel
reveals the raw tensions of imperialism, blending vivid characters with sharp social critique.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-7 col-1-2" type="checkbox" id="input-9">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-7 col-1-3" type="checkbox" id="input-10">
</div>
</div>
<div>
<div>
<label id="label-1-8">
Our new computer microprocessor features 3D V-Cache technology designed for unparalleled performance and
efficiency.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-8 col-1-2" type="checkbox" id="input-11">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-8 col-1-3" type="checkbox" id="input-12">
</div>
</div>
</div>
<details class="compact">
<summary>HTML</summary>
```html
<div class="table-layout" style="--columns: 3;">
<div class="row-headings">
<div id="col-1-1">Sales pitch</div>
<div id="col-1-2">Attribute</div>
<div id="col-1-3">Benefit</div>
</div>
<div>
<div>
<label id="label-1-1">Our sleeping bags have a 4-cm layer of insulation.</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-1 col-1-2" type="checkbox" id="input-1-1">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-1 col-1-3" type="checkbox" id="input-1-2">
</div>
</div>
<div>
<div>
<label id="label-1-2">
Using our sleeping bags will enable you to wake up rested and ready for a day of activities.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-2 col-1-2" type="checkbox" id="input-1-3">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-2 col-1-3" type="checkbox" id="input-1-4">
</div>
</div>
<div>
<div>
<label id="label-1-3">
Our coffee meets international sustainability standards.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-3 col-1-2" type="checkbox" id="input-1-5">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-3 col-1-3" type="checkbox" id="input-1-6">
</div>
</div>
<div>
<div>
<label id="label-1-4">
With every cup of coffee, you are supporting the future supply of high quality sustainably sourced
coffee trade.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-4 col-1-2" type="checkbox" id="input-1-6">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-4 col-1-3" type="checkbox" id="input-1-8">
</div>
</div>
<div>
<div>
<label id="label-1-7">
Step into the heart of British colonial Burma with George Orwell's “Burmese Days”. This powerful novel
reveals the raw tensions of imperialism, blending vivid characters with sharp social critique.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-7 col-1-2" type="checkbox" id="input-9">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-7 col-1-3" type="checkbox" id="input-10">
</div>
</div>
<div>
<div>
<label id="label-1-8">
Our new computer microprocessor features 3D V-Cache technology designed for unparalleled performance and
efficiency.
</label>
</div>
<div>
<input aria-labelledby="col-1-1 label-1-8 col-1-2" type="checkbox" id="input-11">
</div>
<div>
<input aria-labelledby="col-1-1 label-1-8 col-1-3" type="checkbox" id="input-12">
</div>
</div>
</div>
```
</details>