Tables: Adding and Editing

This page covers 

  • Insert a default table
  • Plain bordered Table
  • Striped bordered Table
  • Change table width
  • Insert or delete rows and columns

Insert a default table in a label

NoteThe default Moodle table displays without borders or stripes (it's not pretty in other words), it is recommended that after adding a table you add a table style, see the bottom of this entry for options. 

  • Add a or Edit an existing text and media area.
  • Click the insert table icon in the label's text editor toolbar. A pop up window will open.
  • Insert the number of columns and rows you want, and click Create.
  • To add text to the table, place your cursor in a cell of the table and start typing.

table icon / inserted table (edit label view)

  • Remember the wonderful people in the LII Team are there to help, so before you get frustrated drop us an line,
  • Or if you are keen try your hand at one of these:

Plain bordered Table

Note: requires basic HTML editing. 

To add table with a plain border

  • Click the HTML icon in the label's editing toolbar .
  • Add the code below (for a table 2 rows x 2 columns)
  • Exit HTML code edit mode.
  • Edit the text in the table.
<table class="table table-bordered">
<tbody>
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</tbody> </table>
texttext
texttext

Striped bordered Table

Note: requires basic HTML editing.

To add a striped table

  • From the course page, edit a label.
  • Click the HTML icon in the text editor toolbar .
  • Add the code below (for a table 3 rows x 2 columns)
  • Exit HTML code edit mode.
  • Edit the text in the table.
<table class="table table-striped table-bordered">
<tbody>
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</tbody> </table>

texttext
texttext
texttext

Change table width

To adjust the width of a table

  • Edit the label the table is housed in.
  • Click on the HTML edit icon in the text editor toolbar .
  • Find the first line of HTML code for the table (it starts <table....)
  • Add a width value OR change the width value to reflect your desired width.
  • Exit edit HTML mode.
<table class="table table-bordered" style="width:50%" 

50% width
1
2

<table class="table table-bordered" style="width:350px">

350px width
1
2

Insert or delete rows and columns

  • Click in the row or column that you want to delete or insert a column or row after 
  • Click on the table edit icon in the text editor toolbar .
  • From the menu select the option you wish to apply to the table.

Last modified: Wednesday, 3 July 2024, 9:52 AM