This is how a table without any class or styles added will render in WebPulish.
Please note that need to go into the source code to change the <td> tags to proper <hr> tags for your first row, for accessibility best practice:
Column 1 description | Column 1 description | Column 1 description |
---|---|---|
data | data | data |
data | data | data |
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.
Ensure that the table "id" is unique. See the code below for the two places to input the unique ID -- in the example, we have called it "thisisthetableID".
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 |
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" /> <table border="1" cellpadding="1" cellspacing="1" id="thisisthetableID"> <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</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;">2</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;">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> </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('#thisisthetableID').DataTable( { orderCellsTop: true } ); } ); </script>