Using the most basic table markup, here’s how .table
-based tables look in WebPublish. All table styles are inherited, meaning any nested tables will be styled in the same manner as the parent.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Faculty</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Hollie</td> <td>Velazquez</td> <td>Engineering</td> </tr> <tr> <th scope="row">2</th> <td>Daniel</td> <td>Eastwood</td> <td>Health Sciences</td> </tr> <tr> <th scope="row">3</th> <td>Zaina</td> <td>Reilly</td> <td>Law</td> </tr> </tbody> </table>
Dark mode
You can also invert the colors—with light text on dark backgrounds—with .table-dark
.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-dark">
Table head options
Similar to tables and dark tables, use the modifier classes .thead-light
or .thead-dark
to make s appear light or dark gray.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table"> <thead class="thead-dark">
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table"> <thead class="thead-light">
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-striped">
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-striped table-dark">
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-bordered">
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-bordered table-dark">
Hoverable rows
Add .table-hover
to enable a hover state on table rows within a <tbody>
.
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-hover">
# | First | Last | Faculty |
---|---|---|---|
1 | Hollie | Velazquez | Engineering |
2 | Daniel | Eastwood | Health Sciences |
3 | Zaina | Reilly | Law |
<table class="table table-hover table-dark">
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
.
Always responsive
Across every breakpoint, use .table-responsive
for horizontally scrolling tables.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive"> <table class="table"> ... </table> </div>
Breakpoint specific
Use the following classes as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. [Note: These options would only be applied for a very specific use cases. For most tables, managing breakpoints is not necessary. Simply apply the class="table-responsive" as noted above.]
.table-responsive-sm
576px wide..table-responsive-md
768px wide..table-responsive-lg
992px wide..table-responsive-xl
1200px wide.
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
# | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive-sm"> <table class="table"> ... </table> </div> <div class="table-responsive-md"> <table class="table"> ... </table> </div> <div class="table-responsive-lg"> <table class="table"> ... </table> </div> <div class="table-responsive-xl"> <table class="table"> ... </table> </div>
DataTables
Content editors who wish to extend table functionality to include sorting and/or search capabilities can use the DataTables plugin. To use the plugin, paste the following code into the source of your page (Note: ensure that the table "id" is unique). Once the markup has been added, you can turn off the source and modify your table in the WYSIWYG as usual.
# | Heading | Heading | Heading | Heading |
---|---|---|---|---|
1 | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell |
4 | Cell | Cell | Cell | Cell |
5 | Cell | Cell | Cell | Cell |
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" /> <table border="1" cellpadding="1" cellspacing="1" id="example"> <thead> <tr> <th scope="row" style="width: 17px;">#</th> <th scope="col" style="width: 50px;">Heading</th> <th scope="col" style="width: 104px;">Heading</th> <th scope="col" style="width: 104px;">Heading</th> <th scope="col" style="width: 104px;">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row" style="width: 17px;">1 <tr> <th scope="row" style="width: 17px;">3</th> <td style="width: 50px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> </tr> <tr> <th scope="row" style="width: 17px;">4</th> <td style="width: 50px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> </tr> <tr> <th scope="row" style="width: 17px;">5</th> <td style="width: 50px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> <td style="width: 104px;">Cell</td> </tr> </tbody> </table> <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script><script> jQuery(document).ready(function() { var table = jQuery('#example').DataTable( { orderCellsTop: true } ); } ); </script>