Tables: Adding and Editing

Tables: Adding and Editing

This page covers 

• How to insert a default table .
• How to edit a table.

Exemplar:

To insert a default table in a label

Note: The 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.

• 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>

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>

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%">  

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

Insert or delete rows and columns

• Select the row or column 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 do.

• Add your table content.