Broad Network


Advantages and Disadvantages of HTML Table for Layout

Foreword: In this article I give the advantages of using the table for layout and I also give the disadvantages as the limits.

By: Chrysanthus Date Published: 10 Dec 2015

Introduction

You can use the HTML table element for layout but there are limits to that. In this article I give the advantages of using the table for layout and I also give the disadvantages as the limits. When your layout is regular, the table can be the easy way out. You can use the guide below if you want a table for regular layout. This article is for people who have basic knowledge in HTML and CSS.

Advantages
- Used for regular layout
- Easy to code
- Can be used for fat footer
- Without dimensions, it is good for responsive design.

Disadvantages
- Table is meant to be used for tabular data. So, if you use it for layout, clients with disabilities (blind) will find it difficult to use.
- Table cells are not really independent elements like the div and nav elements. So, certain CSS properties meant for independent elements cannot be applied to the cells.

Using HTML Table for Layout
If your design is not to cross the limits, then to use a table for layout, the table element should have the following attribute:

    role="presentation"

and each cell should have the following attribute:

    style="vertical-align:top"

The first property will aid people width disabilities. The second one makes each cell content to be top aligned (the default is middle aligned).

Table Layout Example
The following is a table layout example:

<!DOCTYPE html>
<html>
    <head><title>Sample</title></head>

  <body>

        <table role="presentation">
            <tbody>
                <tr>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                </tr>
                <tr>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                </tr>
                <tr>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                    <td style="vertical-align:top"><p>paragraphs </p></td>
                </tr>
            </tbody>
        </table>

  </body>
</html>

Responsive Design
If you do not give width values for the table and the cells and the cell contents, in a smaller screen, the block level elements of the table will squeeze inward and the inline elements in the table will wrap downward. Note: image and video elements may not squeeze.

Well, the advice is still that you use HTML table for layout, as a last resort.

That is it.

Chrys

Related Links

Surrounding a Web Page Image with Text
Advantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library

Comments

Become the Writer's Fan
Send the Writer a Message