Rudimentary Formatting with Tables - HTML

It’s not hard to see how tables can help with formatting elements on a local level. For example, consider the following code and the output.

A rudimentary form using spaces for layout purposes.

A rudimentary form using spaces for layout purposes

A simple table can help better align the elements in this form.

Aligning the labels and fields in a form using a simple table.

Aligning the labels and fields in a form using a simple table

However, this serves only to line up the labels and fields in two columns. This is better than no alignment, but if you add a nested table, you can add more order to the radio buttons.

Nested tables allow for even more alignment and formatting control.

Nested tables allow for even more alignment and formatting control

Note: Of course, in real life the tables in the examples would have even more formatting attributes to fine-tune the alignment, and the borders would be off or set to accent the formatting.

Even though these examples are fairly small in scope, it should be easy to see the power and flexibility tables can lend to alignment, formatting, and even page layout.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics