Skip to content
GitLab
Commit 90f6912c authored by Andres Galante's avatar Andres Galante Committed by Mark Otto
Browse files

adds captions and scop col on thead th (#23755)

parent 8672161f
Hide whitespace changes
Inline Side-by-side
Showing
with 112 additions and 73 deletions
+112 -73
docs/4.0/content/tables.md
+ 112
- 73
View file @ 90f6912c
...@@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot ...@@ -16,10 +16,10 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -51,10 +51,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta ...@@ -51,10 +51,10 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
<table class="table table-dark"> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -88,10 +88,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. ...@@ -88,10 +88,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
<table class="table"> <table class="table">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -119,10 +119,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. ...@@ -119,10 +119,10 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
<table class="table"> <table class="table">
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` ...@@ -156,10 +156,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -189,10 +189,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` ...@@ -189,10 +189,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
<table class="table table-striped table-dark"> <table class="table table-striped table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells. ...@@ -226,10 +226,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -264,10 +264,10 @@ Add `.table-bordered` for borders on all sides of the table and cells. ...@@ -264,10 +264,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
<table class="table table-bordered table-dark"> <table class="table table-bordered table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. ...@@ -306,10 +306,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -338,10 +338,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. ...@@ -338,10 +338,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
<table class="table table-hover table-dark"> <table class="table table-hover table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. ...@@ -374,10 +374,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
<table class="table table-sm"> <table class="table table-sm">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -406,10 +406,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. ...@@ -406,10 +406,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
<table class="table table-sm table-dark"> <table class="table table-sm table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>First Name</th> <th scope="col">First Name</th>
<th>Last Name</th> <th scope="col">Last Name</th>
<th>Username</th> <th scope="col">Username</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells. ...@@ -442,10 +442,10 @@ Use contextual classes to color table rows or individual cells.
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>Type</th> <th scope="col">Type</th>
<th>Column heading</th> <th scope="col">Column heading</th>
<th>Column heading</th> <th scope="col">Column heading</th>
<th>Column heading</th> <th scope="col">Column heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -493,10 +493,10 @@ Regular table background variants are not available with the dark table, however ...@@ -493,10 +493,10 @@ Regular table background variants are not available with the dark table, however
<table class="table table-dark"> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>Column heading</th> <th scope="col">Column heading</th>
<th>Column heading</th> <th scope="col">Column heading</th>
<th>Column heading</th> <th scope="col">Column heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -595,16 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ...@@ -595,16 +595,16 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
<table class="table table-responsive"> <table class="table table-responsive">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -650,13 +650,13 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ...@@ -650,13 +650,13 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
<table class="table table-bordered table-responsive-lg"> <table class="table table-bordered table-responsive-lg">
<thead> <thead>
<tr> <tr>
<th>#</th> <th scope="col">#</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
<th>Table heading</th> <th scope="col">Table heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -696,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content ...@@ -696,3 +696,42 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
... ...
</table> </table>
{% endhighlight %} {% endhighlight %}
## Captions
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
{% example html %}
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment