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.

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="example" 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>