How to Add/Edit a Table

Learn how to add/edit a table in a page in Cascade.

Before going into details about how to add/edit a table, it would be helpful to understand some of the basic tags used in HTML to create a table: Edit table 2

Given below, is a simple table structure in HTML for a table with 3 rows and 3 columns, to understand how the different tags are used to create a table. 

 Edit table 3

To add/edit a table in Cascade, you have to use the HTML Editor rather than the WYSIWYG editor. To access this, click on the <> in the content editor.

Edit Table 1

Add a Table

A table can be used to display various items like images, videos or text.

To create a new table, you would need to go to the source code editor and add a new block of code.

Edit Table 11

For example, to create a table similar to the one shown above, you would need to add a <table> with two rows (<tr>) and 4 columns in each row (<td>)

The code for this table is given in the below screenshot. 

Edit Table 12

Tables can be formatted and styled as per the need using HTML and CSS. You can refer to the below links for more detailed information:

HTML Tables

CSS Tables

Edit a table

To edit a table, you can use references on the page to find the code for the corresponding table in the source code.

To edit the Applicant Data table, you can search for the 'Applicant Data' heading in the source code and look for the <table> tag immediately below it to find the table.

 Edit Table 8

Table header

<th> tag can be used to define table header. In the below screenshots, the highlighted sections are the header of the table and the corresponding code for the header section.

 Edit Table 6

Edit Table 7

Add a new row to a table

To add a new row to a table, you would need to add a new <tr> block to the code.

 Edit Table 4

The easiest way to do this would be to copy a <tr> code block (similar to the one highlighted in the image above) of an existing row in the table you want to edit and add the new values in the <td> elements. This ensures that the table formatting stays the same for the new row. 

Add a new column to a table

To add a new column to the table, you would need to add a new <td> element to each row <tr> in the <table>, similar to the below screenshot.

If you had 5 rows in the table, you would need to add 5 <td> elements to add a new column to the table.

Edit Table 5

Rowspan and Colspan

The rowspan and colspan attributes of the <td> and<th> element can be used to define the number of rows/columns a cell should span in a table.

Edit table 9

For the above table given in the screenshot, the cells 'Outcome', 'Years in Which Degrees Were Conferred' and the cells for years (eg., 2019-2020) have been defined with values for colspan and rowspan attributes.

You can refer to the below code for the table, to understand how rowspan and colspan can be used to format a table. Since the height of the 'Outcome' cell in the table spans for two rows, there is an attribute for the <th> class defined as rowspan="2" (highlighted in the screenshot below).

Similarly, for the cell 'Years in Which Degrees Were Conferred' to display across all the columns, we define a colspan="16" attribute for the respective <th> element (Because we want this cell to span across 8 columns each whose colspan value is 2, we define this cell's colspan value as 8x2 = 16).

Please refer to the below links for more details on these attributes:

Colspan Attribute

Rowspan Attribute

Edit Table 10

For more information on creating tables, you can refer to this link - HTML Tables