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

Broad Network

Related Articles

Advantages and Disadvantages of HTML Table for Layout

Introduction

Related Links

Comments