Tables were once used for layout on the web, but as the web progressed, they are now only used for tabular data.
Some things that could be displayed in tables are tuition and fees or other items that will help the user view data quickly.
Please consider another component if you are using a table for layout and not for tabular data.
Please consider adding table headers (th) with either a scope="col" or scope="row" to help with anyone who might be using a screen reader.
Tables are available via the WYSIWYG, and an editor can change the style to Table Striped by going to Formats: Custom > Table Striped. For example, an editor could add headers by changing the Row Properties > Row Type to Header, and the Cell Properties > Cell Type to Header Cell.
We currently have four variants:
th) will be bold and orange texttable-design classbackground-color of orange will be added to the table head (thead)table-design-blue and table-design-grey to change the table head (thead) backgroundmedium-headline-table helps with any tables larger than 100% of the viewport for mobile responsiveness.Tables should only be used for tabular data and not for layout.
Original source from: https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#table-component
<div class="container">
<div class="medium-headline-component">
<h2>Medium Length Display Heading</h2>
</div>
<div class="medium-headline-table">
<table class="table-design-grey">
<thead>
<tr>
<th scope="col">First Category Title</th>
<th scope="col">Second Category Title</th>
<th scope="col">Third Category Title</th>
<th scope="col">
<p>Heading in p tag</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
</td>
<td>
Data
</td>
</tr>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
<tr>
<th scope="row">
<p>Heading in p tag</p>
</th>
<td>
Data
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
<tr>
<td>
Row Four
</td>
<td>
<p>
<a class="orange-btn" href="#">Action</a>
<a class="blue-btn" href="#">Action</a>
<a class="grey-btn" href="#">Action</a>
</p>
</td>
<td>
<p>Data in p tag</p>
</td>
<td>
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Provident porro saepe doloremque labore ipsum inventore recusandae voluptas aperiam, dolore non veniam iure adipisci ipsam laborum.</li>
<li>Provident laborum, obcaecati, alias deleniti consectetur harum voluptas exercitationem debitis molestias dolores nihil, quia a ratione repellat asperiores molestiae sed et aperiam aspernatur.</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
/* components/01-visual-styling/02-typography/06-table/table.scss */
/* BEGIN table.scss */
.medium-headline-component h2 {
font-size: 32px;
color: $blue;
font-weight: 700;
margin-bottom: 30px;
}
table {
width: 100%;
padding: 0px 15px;
margin-bottom: 20px;
thead th, th {
font-weight: bold;
font-size: 17px;
color: $orange-a11y;
}
th, td {
border: 1px solid $blue;
padding: 12px;
vertical-align: top;
}
tr th {
padding: 12px 25px;
}
tr td {
padding: 12px 25px;
font-size: 17px;
color: $blue;
}
}
@mixin striped-table {
thead {
background-color: $orange-a11y;
th {
color: $white;
}
}
th, td {
border: 0px;
}
tbody>tr {
border-bottom: 1px solid $grey;
&:nth-child(2n) {
background-color: $white-b;
border-top: 1px solid $grey;
}
th {
color: $blue;
}
}
}
.table-design {
@include striped-table();
}
.table-design-grey {
@include striped-table();
thead th {
color: $blue;
}
thead {
background-color: $grey-b;
border-bottom: 1px solid $grey;
border-top: 1px solid $grey;
}
}
.table-design-blue {
@include striped-table();
thead {
background-color: $blue;
}
}
.mb-0 {
margin-bottom: 0px;
}
@include media-breakpoint-down(lg) {
.medium-headline-table {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
}
/* Dark Mode - Table Styles */
@include color-mode(dark) {
.medium-headline-component h2 {
color: $white;
}
th, th p {
color: $orange;
}
table.table tr td, table.table tr th {
color: $grey-e;
border: 1px solid $grey-e;
}
table th, td {
border: 1px solid $grey;
}
table tr td {
color: $white;
border: 1px solid $grey;
a.orange-btn:hover, .orange-btn:hover{
color: $white;
}
a.grey-btn{
color: $blue;
}
}
.table-design th, .table-design tr td {
border: 1px solid $grey-e;
}
.table-design tbody > tr:nth-child(2n), .table-design-grey tbody > tr:nth-child(2n), .table-design-blue tbody > tr:nth-child(2n), .table-design-blue tbody > tr:nth-child(2n), .table-design-grey thead{
color: $blue;
a{
color: $blue;
}
td, th, p, ul li, ol li, h2, h3, h4, h5, h6, th p{
color: $blue;
a{
color: $blue;
}
}
a.blue-btn{
color: $white;
}
a.orange-btn, .orange-btn:hover{
color: $white;
}
.grey-btn:hover{
color: $white;
}
}
.table-design tbody > tr {
border-bottom: 1px solid $grey-c;
}
.table-design-grey th, .table-design-grey tr td {
border: 1px solid $grey-e;
}
.table-design-grey tbody > tr {
border-bottom: 1px solid $grey-b;
}
.table-design-blue th, .table-design-blue tr td {
border: 1px solid $grey-e;
}
.table-design-blue thead > tr th p, .table-design-blue tbody > tr:nth-child(odd) th p{
color: $white;
}
.table-design-blue tbody > tr {
border-bottom: 1px solid $grey-b;
}
.table-design tbody > tr:nth-child(odd), .table-design-blue tbody > tr:nth-child(odd), .table-design-grey tbody > tr:nth-child(odd), .table-design thead > tr{
th, th p{
color: $white;
}
a.orange-btn:hover, .orange-btn:hover{
color: $white;
}
a.grey-btn{
color: $blue;
&:hover{
color: $white;
}
}
}
.tab-wrapper .tab-content .tab-body-content {
table tbody tr td {
color:$blue;
border: 1px solid $blue;
}
table thead tr th {
border: 1px solid $blue;
}
.table-design, .table-design-blue, .table-design-grey {
th, tr td{
border: 0;
}
}
table.table-design tbody tr td {
color:$blue;
border:none;
}
table.table-design-blue tbody tr td {
color:$blue;
border:none;
}
table.table-design-grey tbody tr td {
color:$blue;
border:none;
}
.table-design, .table-design-blue, .table-design-grey {
tbody tr td, tbody tr th p, tbody>tr:nth-child(odd) th{
color:$blue;
border:none;
}
}
table.table-design, table.table-design-blue, table.table-design-grey{
thead tr th {
border:none;
}
}
}
.accordion .accordion-item .accordion-body-content {
th, th p {
color: $blue;
}
.table-design thead th, .table-design-blue thead th {
color: $white;
p{
color: $white;
}
}
th,
td {
border: 1px solid $grey-e;
}
.table-design, .table-design-blue, .table-design-grey {
th, tr td{
border: 0;
}
}
table tbody tr td {
color:$blue;
border: 1px solid $blue;
}
table thead tr th {
border: 1px solid $blue;
}
.table-design, .table-design-blue, .table-design-grey {
tbody tr td, tbody tr th p, tbody>tr:nth-child(odd) th{
color:$blue;
border:none;
}
}
table.table-design, table.table-design-blue, table.table-design-grey{
thead tr th {
border:none;
}
}
}
}
/* Dark Mode - Table END */
/* END table.scss */
<div class="container">
<div class="medium-headline-component">
<h2>{{ heading }}</h2>
</div>
<div class="medium-headline-table">
<table class="table-design-grey">
<thead>
<tr>
<th scope="col">First Category Title</th>
<th scope="col">Second Category Title</th>
<th scope="col">Third Category Title</th>
<th scope="col"><p>Heading in p tag</p></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
<p>{{render '@button--orange'}} {{render '@button'}} {{render '@button--grey'}}</p>
</td>
<td>
Data
</td>
</tr>
<tr>
<th scope="row">
Row One
</th>
<td>
<a href="#">Link<a>
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
<tr>
<th scope="row">
<p>Heading in p tag</p>
</th>
<td>
Data
</td>
<td>
Data
</td>
<td>
Data
</td>
</tr>
<tr>
<td>
Row Four
</td>
<td>
<p>{{render '@button--orange'}} {{render '@button'}} {{render '@button--grey'}}</p>
</td>
<td>
<p>Data in p tag</p>
</td>
<td>
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Provident porro saepe doloremque labore ipsum inventore recusandae voluptas aperiam, dolore non veniam iure adipisci ipsam laborum.</li>
<li>Provident laborum, obcaecati, alias deleniti consectetur harum voluptas exercitationem debitis molestias dolores nihil, quia a ratione repellat asperiores molestiae sed et aperiam aspernatur.</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>