Editing Table Basics

Tables allow you to organize data and make information easier to digest. In most cases where you see a text editor on OrgSync, you'll see the table option. It looks like a small spreadsheet. 

The table pop-up allows you to define a number of settings. The three most important settings are the number of columns, number of rows, and width. After you create the table, begin populating each cell. You'll notice the width of each column adjusts as you type. This is the table essentially 'guessing' what you want the widths to be. From this point on, any changes you want to make to the table must be made in the HTML. Continue reading for directions on common steps you'll likely need to make when working with tables. 

Change the width of your table or specific columns

Click Source in the top right of the editor to access the HTML. Notice the table already has a defined width. Alter this number to adjust the width of the table. If you would like to adjust the width of a specific column, begin by copying the code highlighted in the screenshot below. Next, locate the first <tr> element in your table. This represents the first row and it should be followed by a series of <td> elements, which represent your columns. On the column where you want to apply a set width, enter a space after "td" and paste the code you copied earlier (i.e. <td style=width:500px;">). This allows you to set the column to a defined width. Make sure to adjust the number of pixels to something smaller than the overall table width.

Add or remove a column

Click Source in the top right of the editor to access the HTML. Next, locate the first <tr> element in your table. This represents the first row and it should be followed by a series of <td> elements, which represent your columns. If you have three columns, your HTML will have three <td> elements after the <tr> element. In sequential order, these <td> elements represent columns one, two, and three.

If you want to remove column two, then remove the second <td> element to. Make sure to remove everything from the opening <td> element to the closing </td> element. The screenshot below highlights everything that should be removed for that row. Repeat this process for each of the rows in your table. 

If you would like to add a new column, copy the code for a different column (<td> to </td>) and paste it before the ending </tr> element. If you're not sure what to copy, see the code highlighted in red below. 

Add or remove a row

Click Source in the top right of the editor to access the HTML. After the opening <tbody> tag you'll see a series of <tr> and </tr> elements. Each of the <tr> elements represent a new row in your table and the </tr> element closes out each row. 

To remove a row from your table, simply remove everything from the opening <tr> element to the closing </tr> element. See the screenshot below for everything that should be removed.

To add a new row to your table, begin by copying the code for an existing row. This is everything from the opening <tr> element to the closing </tr> element. Next, paste this before the closing </tbody> element then adjust the contents of each cell. See the screenshot below for an example of what should be copied and pasted.

 

Have more questions? Submit a request

Comments

Powered by Zendesk