Tables

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:

You can also use the WYSIWYG editor for these actions. See the Working with WYSIWYG editor section below.

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>

Working with Tables in WYSIWYG Editor

You can access all table-related options such as header settings, row and column controls, cell merging and splitting, and formatting properties by inserting a table and then clicking inside it to display the full table toolbar.

Click inside any cell to reveal the table toolbar
To access column options, enable Header column by clicking it until it turns green to set the first column as a header
The column options allow you to insert columns before or after, delete columns, or select an entire column for editing

Click inside any cell to reveal the table toolbar
Enable Header row by clicking the switch to turn green to set the first row as a header
The row options let you manage table structure by adding rows above or below, deleting rows, or selecting an entire row for editing

Click inside any cell to reveal the table toolbar
The merge options allow you to combine the selected cell with adjacent cells in any direction (up, right, down, or left), to group content or create larger sections within a table
The split options let you divide a cell either vertically or horizontally, helping you refine the layout or break content into smaller sections

Click inside any cell to reveal the table toolbar
To use the Table Captions, click table and select the caption icon in the toolbar
Type to add a descriptive label above your table

Click inside any cell to reveal the table toolbar
Cell properties let you customize the appearance and layout of a cell, including borders, background color, size, padding and text alignment
After editing, click on Save

Click inside any cell to reveal the table toolbar
Table properties let you control the overall look and layout of the table, including borders, background color, size, and alignment
After editing, click on Save

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="none"></script><script>
jQuery(document).ready(function() {
    var table = jQuery('#thisisthetableID').DataTable( {
        orderCellsTop: true
    } );
} );

</script>

91TV

Working with Tables in WYSIWYG Editor

Header Column

Header Row

Merge and Split Cells

Table Caption

Cell Properties

Table Properties