Tables

Tables on the web can be a bit cumbersome at times. They are not always the easiest to work with, but with a WYSIWYG editor they are sometimes the best solution to getting content to look the way you want it to. Today I am going to show you how to insert and modify a table in a datAvenger service website. This process is relatively similar in datAvenger Pro website, so this will be the sole tables management tutorial.

To start I would like to say that tables at their most basic should be used for tabular data, not layout. That being said, there are instances when tables come in handy to display content in a certain way. For instance an image to the right or left of a paragraph on the side of it.

Before I walk you through the ins and outs of tables there is something you should know. In some cases while building your website we may inadvertently add styles that override the table properties and cause you changes to not display. If you find yourself making table changes that are not reflecting on the site, please let us know and we will try to correct this for you.

Lets get right into it. To add a table you need to click the spot on the page where you want the table to be. If it needs to be in the middle of 2 paragraphs you may have to click at the end of the first paragraph and click enter or shift+enter to bring your cursor to the next line where you can put the table.

Once you cursor is in the proper spot, click the insert table icon in the tool bar. This will open the insert table window where you can set the initial table properties. These table properties consist of:

• rows: the number of rows the table will have (down)
• cols: the number of columns the table will have (across)
• width: the width of the table in percent, pixels or ems.
• fixed width columns: will set all of the columns in the table to be the same width by default. For example if you have a 4 column table, each column will be 25% across the width of the table.
• alignment: will set how the table will show up relative to the text around it. This option should only be used if you want the table to show up next to other text on the page, and will only be visible if the table is less than 100% of the page width.
• border thickness: is how thick of a border the table will have. If you do not want a border, set this option to 0.
• cell spacing: is how much space is between individual cells of the table.
• cell padding: is how much space is between the cell wall and the text in side the cell.

Once you have changed all of the options that you need click okay to insert your table into the page.

By default, if you set the border to 0, you will not be able to see the bounding edges of it and the cells inside of it. Click the toggle borders icon to see a faint grey border. This gives you a guideline of where the table edges are. This border will not show on the front side of your website, it just acts as a guide for you in the editor.

Now that you have a table on your page you can add content to it, images, links, anything that you can within the constraints of the editor.

You may run into instances where you would like to change the properties of a table after you have put it on the page. There are 3 options for editing the table properties after adding to the page.

1. Edit the table as a whole. You do this by clicking in any cell of the table, then right click on the mouse. This will show you a menu where you can choose table properties, which will open the table properties window. The options in the table properties window are as follows:
   • caption: this is like a title for your table. What you enter here will show up above your table in large bold text.
   • summary: this is a summary of what your table consist of. This will not show on the page, but is assigned to your table behind the scenes of the page.
   • float: this will allow you to float your table left or right of other items on the page. If the table is 100% the width of the page you will not notice a difference by setting this attribute.
   • width: lets you set the width of the table in percent, pixels or ems.
   • text align: lets you set the text to left, center, right or justified in the table. This will effect all of the cells in the table.
   • height: lets you set the height of the table in percent, pixels or ems. Rarely is height used. If you are using height it can mess with the size of the table cells, but it is an option you have.
   • vertical align: lets you set the vertical alignment of the text in the cells, top, middle, bottom or baseline.
   • spacing and padding are as we saw them in the original insert table window.
   • borders: this lets you set the width of the border on the table.
   • frames: lets you set how you want the frame of the border to show.
   • rules: lets you set how the rules in between columns and rows will show.
   • background: lets you set a background color or image to the table.
   • fg color: lets you set a foreground color to the table.
   • border: lets you set the color, type and thickness of the border on the table. If you only set this option without the frame and border settings the border will be only on the edges of the table.
   • collapsed borders: sets whether or not the borders in the table will be one solid border or separated borders by cells spacing.
2. Next you can edit the individual rows in a table. Do this by clicking in the row you want to edit, does not matter what cell in that row, then right click and select row properties. This will open the Row Properties window where you have the following options:
   • width: you can set the width of the row, this property generally will not work as most table rows have to stretch the full length of the table.
   • text align: lets you set the alignment of the text in the cells of the row, left, center, right or justified.
   • height: lets you set the height of the row. This option will reflect on the front side of the site if the content in the row is less than the height you give. When working with height it is best to specify pixels to ensure that it is the height you want it to be.
   • vertical align: lets you set the vertical alignment of the items in the row, top, middle, bottom or baseline.
   • background: lets you add a background color or image to the row.
   • fg color: lets you add a foreground color to the row.
   • border: lets you define the border color, type and size for the row.
3. Lastly you can edit the properties of the individual cells for the table. Do this by clicking in the specific cell you want to change, then right click and choose cell properties from the menu. Here you will have all of the same properties as the row properties window, but the settings will only change the specific cell.

Some other important things to note about editing tables. If you add a table to your page and want to change the width of the columns, you only need to change the width of the first cell in each column for it to take effect. Also important to note that if you are changing the widths you want to make sure the width of the columns adds up to 100% of the table with. So if you have a 100% width table you could have 20%, 20%, 30%, 30% for a 4 column table, or if you are using pixels you could have a 500px wide table and columns that were 100px, 100px 150px, 150px for a 4 column table.

If you want to add and remove rows and columns datAvenger makes it easy to do. There are 2 ways to do this, both involve first clicking in the row or column to the left/right or top/bottom of where you would like to add/remove your row or column. Then you can use the little arrows to the left and top of the cell to add a row/column above/below, or right/left of the row/column your in. You can also click the little “x” in the middle of the arrows to the left and top of the cell your in to remove the row or column. Alternatively, or if you don’t see the arrows, you can right click in the cell and select add/remove row or add/remove column.