page id for this page is 162

Text can be aligned within its containing element to the left,

or to the right,

or it can be centred.

There is also the choice of justifying both the left and right hand sides of text, much as is seen in newspapers, although sometimes this can give less than ideal results. It is important to see how each option behaves on smaller screens before choosing which one to use.

Another stylistic choice is whether or not to indent the first word of a new paragraph. Here is how you achieve this, in this case with an indent of 20 pixels. Here it is done with an inline command but normally one would set up a class, say “indentnewp”, and set the style rule there. Or if you wanted to use this rule throughout the site you could add it as a style rule for all p elements.

In a long section of text, you may wish to force the text to move to a new line at some point. This would be especially true for something like a poem. Let’s do this here.
I used the “br” or “break” tag. But as you can see, it does not insert a blank line. If you wish to do this, you can use the “p” opening and closing tags to define a new paragraph. We’ll do it here.

A “p” tag automatically has a blank line inserted above/below it. A div tag does not.

At ABC company, we inventory a wide variety of gadgets, widgets & thingamajigs for use in a variety of machines.

The two-column list below is done using a special table id, “specialt” whose style rules are in the Theme Options CSS styles box.

Our products include:

Column 1	Column 2
This is where the table footer text can go: in this case I have made it span 2 columns
Thingy 1 & Thingy 2	Gadget 1 & Widget 2
Widget 1 & Gadget 2	Thingamajig 1
Thingamajig 3 & Thingamajig 4	Thingamajig 2
Thingamajig 5 & Thingamajig 6	Thingamajig 7 & Thingamajig 8
Widget 5 & Gadget 24	Widget 16 & Gadget 27
Widget 19 & Gadget 22

Please contact us if you have any questions.

The comment above is outside the table and was centre-aligned using inline styling. It is good practice to use thead, tbody and tfoot tags. They can be used to apply styling and to enable scrolling of the table body independently of the header and footer. And when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The next two-column display is done by using an id called “columns”, with classes “column” (for general settings) “left” and “right” (for floating left and right, respectively). It doesn’t seem to be quite as good on my phone as the above.

Marigolds

Astilbes

Pansies

Lupins

Daisies

Aquilegia

Helllebores

Hollyhocks

Below is a table which has been formatted to “look nice” with borders, margins etc applied using a special table class, “nicet” whose style rules are in the Theme Options CSS styles box.

Leaving off the closing table tag completely messes up the page – in fact moving the sidebar items down to the bottom. Beware closing tags! Border-collapse is in the main CSS

Below I am going to add a couple of tables nested in the main table. These used to be used to create the layout for web pages, but this doesn’t work very well (at all?) with responsive websites and html5 provides different ways to create layouts. Nested tables are still useful for some tables though. The formatting of the tables would have to be picked carefully based on the look required. The class of the outer table seems to carry over to the inner table. Need to experiment more with this, when I have an application.

This seems like a good page on which to add lists. Here is a default unordered list:

• edam
• gouda
• cheddar
• brie

Now I will make a class so I can give the bullets a different style, with square bullets. i also made the whole list orange – perhaps not all that useful.

• cheshire
• red leicester
• camembert
• stilton

Now I will add an image as the bullet style:

• roquefort
• feta
• wensleydale
• laughing cow?

…though obviously I need to be careful about vertical centering of the image etc – not very good here.
Ordered lists are numbered lists, but there are various choices for the types of numbering. Here I have added lowercase Greek, using inline styling for a change, instead of creating a class. There are about 15 different style types listed.

1. tomato
2. chive
3. lettuce

Here is the default though:

1. carrot
2. sage
3. potato