About the good usage of Tables

Contents

Use tables for tabular data only
How to handle large tables?
Framed paragraphs, colored backgrounds...

Use tables for tabular data only

Table tags have to be used only when displaying tabular data and not like in Web page authoring for layout purposes. There is no exception to this rule.

Nested tables are not supported : this means you cannot put a table tag inside a cell of another table. This mechanism is mostly used when doing positioning of elements in Web sites, not for tabular data. However, rowspan and colspan attributes are supported, so you can do almost everything you need with only one table tag and smart use of rowspan & colspan.

Here is an example of a table that will work well in Mobipocket ebooks in HTML format:

Fruit	#/week	Sales	%	Remarks	Sales
Apple	4	$ 250,000	25%	Sold well	$ 250,000
Peach	2	$ 150,000	13%		$ 150,000
Banana	5	$ 670,000	31%		$ 670,000
Pear	3	$ 560,000	19%	Need more marketing	$ 560,000
Plum	2	$ 432,000	13%		$ 432,000
Walnut	1	$ 35,000	3%		$ 35,000
Pineapple	15	$14,000	2%	Prospective sales	$14,000
Grapefruit	5	$1,345,000	23 %		$1,345,000
Hazelnut	3	$ 25,000	45%		$ 25,000
Total	16	$3,679,000	235%		$3,679,000

How to handle large tables?

Table parsing and display is very CPU intensive and is slow compared to any other HTML tag. Moreover, the Mobipocket reader can handle tables that are larger than the screen but the user experience becomes worse as the table size grows. You should therefore avoid large tables. If you encounter a table that covers a whole paper page, or a table that contains a lot of text in one cell, you are basically in front of a non-reflowable layout. Both rendering it in HTML or as an image will not work well because the resulting page will be much larger than a screen and the user will have difficulties reading it. Here, creative action has to be taken to redesign the table as something else that is reflowable.

Example of a table that will not work in Mobipocket Reader: the following table is large and contains lots of text in its cells which means it should not be rendered as an HTML table or even an image but reformatted instead:

Drug name	Known adverse effects	Known benefits	Similar drugs	Dosage
ABUNAMON	Causes nausea. Do not prescribe to people who have been diagnosed with digestion troubles in the past. Do not prescribe to pregnant women. This drug can cause fetus malformations and miscarriages. Not for use with children under 5 years old or under 20kg of weight. Not for use during a week after any sedation treatment	Regulates immune system responses Reported to have beneficial effects on mood and behavior too	EDENTROPIL from the XYZ laboratory UINOVAL, injectable doses PONINOLAM, injectable doses MOLONAL, oral tablets, 5 and 10 mg MINERVON from YTS laboratory, available as tablets and injectable KLANDRATROPONIL, oral tablets EXUVENIL, injectable doses SAGRAMENTAL, tablets	Children between 5 and 10 years: 0.5 mg/kg/day in 3 takes during meals. Children over 10 years: 1 mg/kg/day in 3 takes during meals. Adults: up to 200 mg/day depending on condition and observed effects
CLOSTRAMON	General weekness and muscular pain Abdominal discomfort, nausea Do not prescribe to pregnant women. This drug can cause fetus malformations and miscarriages. Not for use in geriatric care Do not use for children under 18	Multiple beneficial effects on overall psychological state	PONINOLAM, injectable doses MOLONAL, oral tablets, 5 and 10 mg MINERVON from YTS laboratory, available as tablets and injectable EDENTROPIL from the XYZ laboratory EXUVENIL, injectable doses	Adults: up to 200 mg/day. Doses have been confirmed to lose effect after 200 mg/day although severe adverse affects only appear beyond 1000 mg/day.
And so on	And so on	And so on	And so on	And so on

This table can be reformatted in the following reflowable way:

ABUNAMON

Known adverse affects:

Causes nausea. Do not prescribe to people who have been diagnosed with digestion troubles in the past.
Do not prescribe to pregnant women. This drug can cause fetus malformations and miscarriages.
Not for use with children under 5 years old or under 20kg of weight.
Not for use during a week after any sedation treatment

Known benefits:

Regulates immune system responses
Reported to have beneficial effects on mood and behavior too

Similar Drugs:

EDENTROPIL from the XYZ laboratory
UINOVAL, injectable doses
PONINOLAM, injectable doses
MOLONAL, oral tablets, 5 and 10 mg
MINERVON from YTS laboratory, available as tablets and injectable
KLANDRATROPONIL, oral tablets
EXUVENIL, injectable doses
SAGRAMENTAL, tablets

Dosage:

Children between 5 and 10 years: 0.5 mg/kg/day in 3 takes during meals.
Children over 10 years: 1 mg/kg/day in 3 takes during meals.
Adults: up to 200 mg/day depending on condition and observed effects

CLOSTRAMON

Known adverse affects:

General weekness and muscular pain
Abdominal discomfort, nausea
Do not prescribe to pregnant women. This drug can cause fetus malformations and miscarriages.
Not for use in geriatric care
Do not use for children under 18

Known benefits:

beneficial effects on overall psychological state

Similar Drugs:

Adults: up to 200 mg/day.
Doses have been confirmed to lose effect after 200 mg/day although severe adverse affects only appear beyond 1000 mg/day.

Dosage:

Adults: up to 200 mg/day.
Doses have been confirmed to lose effect after 200 mg/day although severe adverse affects only appear beyond 1000 mg/day.

And so on...

Framed paragraphs, colored backgrounds...

Framed paragraphs or paragraphs you want to appear on a shaded background should never be rendered with a table. A table with a lot of text in one cell will not work well. If a single table cell does not fit into the screen, it will not be paginated and content will be lost.

You can render framed paragraphs using the <div> tag with border and background color attributes. Here is an example:

<div style="border: 1px solid black; background-color: gray;"><font color="white" size="+2"><img src="img/bookmark.gif" />Important information to be displayed in a frame so as to attract attention.</font></div>

Will display as:

Important information to be displayed in a frame so as to attract attention.