1. Tutorials
  2. Manage Content
  3. Tables

Tables

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>