Tables enable you to organize information on your page into columns and rows. Unlike Bootstrap Grids, the table has a clear structure that draws attention to the information contained within the table.
Image

How to Create a Table
- Create a page or edit an existing one.
- Add any content that has the Editor Toolbar (Text, Accordion, Cards, Text with Background, Text on Media) and select Table.
- Enter the desired amount of Rows and Columns. Additional options to customize your Table are described in the Fields section below.
- Click OK.
Fields
- Headers:
- First Row: Bolds the top row of data in the table
- First Column: Bolds column header
- Both: A combination of both in the table at the same time
- Caption: Displays a line of text at the base of the table
By right-clicking on your table, you are able to edit table cells, rows, columns, and properties. From here, you can also paste information into cells or delete the table.
- Create a new table or navigate to an existing one. Right click in one of its cells.
- To edit cells, navigate to Cells and select the desired action.
- To edit rows, navigate to Rows and select the desired action.
- To edit columns, navigate to Columns and select the desired action.
- Navigate to Table Properties to add table headers or a caption.
- Note: You cannot change the number of rows and columns through Table Properties. You can only do so following the instructions above.
- Click OK to save.
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:
- Navigate to the Source button in the Editor Toolbar.
- Navigate to the <table> tag at the top of the table source code.
- 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.
- Save
How to Change Table Headers:
- Navigate to the Source button in the Editor Toolbar.
- Navigate to the <thead> tag at the top of the table source code.
- Insert class = "thead-light" or class = "thead-dark" inside the <thead> tag.
- Ex: <thead = "thead-dark">
- Save
How to Change Table Borders:
- Navigate to the Source button in the Editor Toolbar.
- Navigate to the <table> tag at the top of the table source code.
- 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">
- Save
How to Make Tables Hoverable:
- Navigate to the Source button in the Editor Toolbar.
- Navigate to the <table> tag at the top of the table source code.
- Insert class = "table table-hover" inside the <table> tag
- Ex: <table class = "table table-hover">
- Save
- Displaying data that can be read as "if X, then Y" statements
- Organizing many rows of information
- Can't set stable column width
- Mobile responsiveness is limited
Student | Contact Information |
---|---|
Wilma Wildcat |
520-621-5555 |
Wilbur Wildcat |
520-621-5555 |