Using tables in the text area

Guidelines for using tables in the text area

Non-Technical
You may wish to avoid the use of tables. Setting up tables can be time consuming and difficult to get a good result across a wide range of devices. Look for a simpler way to display your page content.

Experienced Webmaster
Tables can be embedded in the text area using the online editor. If certain rules are followed, multi-column tables work well when the cell contents are just words and numbers, e.g. used to display simple lists or a set of values with row and column headings. e.g.

Have a clear idea of what you are trying to achieve before you start and check your results carefully when you have finished. The simpler the table the better.

A vital rule is that the overall table width setting should always be entered as a % of the total display width that is available (not pixels!). Leave the cell widths blank if you want the column width to be determined by the amount of text/characters they contains.

Limit cell contents to alphanumeric data. Avoid large text or very long words which will make it difficult for text to be wrapped within a cell on smaller screens.

If you would like more control over the relative widths of columns, express each cell width value as a % of the overall table width. You may need some trial and error to get the best result. Always test the result to check how it will looks on different size screens.

Tables containing images can be quite a challenge but single column tables containing images and text can work well on a wide range of devices if the images are less than 266 pixels wide. Below is an example.

Example: Table with images This table is 1 column by 5 rows. Three of the rows have been used to insert lines for visual effect.To make the table responsive, the table width should always be entered as a % of available width, not pixels (this table is set at 100% and therefore uses all of the available width).

Images should be at the correct size before uploading. To display well on a wide range of devices images should be less than 266 pixels wide (as a guide, the images here are 226 pixels wide). Table bImages should be at the correct size before uploading and less than 266 pixels wide (these two image are 226 pixels wide).    . orders have been made invisible by setting to 0. TIP: Having inserted a table into the page, if you wish to change properties, such as adding extra rows, 'right-clicking' anywhere within the table should bring up the required menu options.

Geeks
Our current thinking is that you will need to be a whiz at coding to manage larger images in multi-column tables and make the overall display responsive across a wide range of devices. If you find an easy way of achieving this, please let the Yahoo Group know! 

Tip for coders: To avoid word-wrap on column or row headings that have more than one word, e.g. "Column 10", put a non-breaking space (&nbsp) between the words.