Tables

By clicking into your table, you are able to edit table cells, rows, columns, and properties by using the small wizard that appears above the table. From here, you can also paste information into cells or delete the table.

1. Create a new table or navigate to an existing one. Click in one of its cells.
2. The leftmost button in the wizard will show you options for editing, adding, or removing columns.
3. The second button in the popup wizard will show you options for editing, adding, or removing, rows.
4. The third button in the popup wizard will show you options for editing, merging, or removing, cells.
5. The last button enables a caption for your table.
6. Click outside of the table to confirm changes. 

You can edit the source code of a table to alter its appearance. Below are some of the several ways you can customize a table.

How to Change Table Backgrounds:

1. Navigate to the Source button in the Editor Toolbar.
2. Navigate to the <table> tag at the top of the table source code.
3. Insert class = "table table-light", class = "table table-dark", or class = "table table-striped" inside the <table> tag.
   • Ex: <table class="table table-striped">
   • Note: Backgrounds can also be combined. An example of this would be <table class="table table-striped table-dark"> which makes the table background alternate between 2 shades of dark gray.
4. Save

How to Change Table Headers:

1. Navigate to the Source button in the Editor Toolbar.
2. Navigate to the <thead> tag at the top of the table source code.
3. Insert class = "thead-light" or class = "thead-dark" inside the <thead> tag.
   • Ex: <thead = "thead-dark">
4. Save

How to Change Table Borders:

1. Navigate to the Source button in the Editor Toolbar.
2. Navigate to the <table> tag at the top of the table source code.
3. Insert class = "table table-bordered" or class = "table table-borderless"  inside the <thead> tag.
   • Ex: <table class="table table-bordered">
   • Note: Border classes can be combined with background classes within the <table> tag like this: <table class="table table-borderless table-dark">
4. Save

How to Make Tables Hoverable:

1. Navigate to the Source button in the Editor Toolbar.
2. Navigate to the <table> tag at the top of the table source code.
3. Insert class = "table table-hover" inside the <table> tag
   • Ex: <table class = "table table-hover">
4. Save