Tables

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.

create table

How to Create a Table

  1. Create a page or edit an existing one.
  2. Add any content that has the Editor Toolbar (Text, Accordion, Cards, Text with Background, Text on Media) and select Table.
  3. Enter the desired amount of Rows and Columns. Additional options to customize your Table are described in the Fields section below.
  4. 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

Useful Links

Adding  Pages Accordions Cards Text with Background 

Text on Media Bootstrap Grids Editor Toolbar

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.

  1. Create a new table or navigate to an existing one. Right click in one of its cells.
  2. To edit cells, navigate to Cells and select the desired action.
  3. To edit rows, navigate to Rows and select the desired action.
  4. To edit columns, navigate to Columns and select the desired action.
  5. Navigate to Table Properties to add table headers or a caption.
    1. Note: You cannot change the number of rows and columns through Table Properties. You can only do so following the instructions above.
  6. 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:

  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

  • 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

wilmawildcat@email.arizona.edu
Wilbur Wildcat

520-621-5555

wilburwildcat@email.arizona.edu