Tables

Not really simple.....

On this page you'll find examples of tables made with the Wysiwyg editor.
Like the subtitle already states this is not really simple. Especially the input of a combination of text and tables in the editor itself could lead to a situation that the editor doesn't know where to go. So saving while you go is important! Otherwise you could loose content! It's better to first put in the text and do the tables afterwards.


A simple table made with the General tab (so without specifying anything on the Advanced tab)
(3 columns / 2 rows / centered on page / fixed width en height of table (300x100) / border 1):

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

And a different one (2 columns / 3 rows / caption / no fixed width and height / left on page / border 3):

Tabletitle
1-1xxxxx 1-2
2-1 2-2y
3-1zz 3-2

Here you get the same situation like described with the images that text following a table will be positioned next to it if it is left or right aligned.

To get text here the HTML trick was applied.

Tables made with General and Advanced tab:

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

This is a table like the first one on this page but right aligned.
Through the Advanced tab this table got a border and background color.
The table also got an ID. In this case it's Tablesample. This id can be added to the URL through the #id construction. Like this.
A summary was also added ("This is a sample table") which is not viewable on the web page but is for readers and search engines.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

On the General tab cellpadding (space between cell border and the content) was set to 25; cellspacing (space between the cells) was set to 10. Notice that the size of the table is larger.
On the Advanced tab a table background was specified.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3

On the General tab border 3 was chosen and on the Advanced tab Frames=hsides and Rules=rows was selected. Frames determines which part of the border is viewable (in this case only the horizontal sides) and Rules which line are viewable within the table (in this case only between the rows).

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3
3-1 3-2 3-3

Besides the tabs for the table there are also possibilities to specify settings for the rows. This is a sample of data centering and a background color for every odd row. There are no samples of row promotion to header or footer, vertical positioning, row height, ID and background image.

 

1-1xxxxx 1-2 1-3
2-1 2-2yy 2-3
3-1 3-2 3-3

Even on cell level such settings can be specified. Some samples follow.

The possibilities are even bigger than shown.

Now some samples of cell behaviour when content is small or big.

In a table with fixed width and height

This is a long text and will be even longer when I type more.

After enter I will continue typing data. The intention is to show what happens with the other cells when the content of this one gets very big. Shown is that the fixed dimensions (300 x 100) only are adhered in horizontal sense and the table gets stretched vertically. Also is shown that the spreading of column width can have peculiar effects.

I am trying to type in lots of text but less than in the other cell.
Is this still viewable? And this?

A table without fixed width and height

This is a long text and will be even longer when I type more.

After enter I will continue typing data. The intention is to show what happens with the other cells when the content of this one gets very big. It is clear that the behaviour is completely different than in the other table.

I am trying to type in lots of text but less than in the other cell.
Is this still viewable? And this?

Used tags: editing table

Advert

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Add to favorites
  • email
  • Facebook
  • LinkedIn
  • Twitter
  • NL
QR
Follow Remark Webdesign!

 

Advert

Copyright 2012-2024 © Remark Webdesign
https://www.remark-webdesign.nl/pivxbase/page/tables/remarkwebdesignen