Differences between using tables and divs for form layouts

Question

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image:

Although I can easily create these forms using tables, I encounter issues when attempting to hide certain choices and adjust values to prevent gaps in the layout.

While experimenting with div-based forms, I found that they become disorganized when resizing the browser window and aligning elements is challenging.

Although the topic discussed in this link is relevant: Is it bad design to use table tags when displaying forms in HTML? it doesn't completely address my concerns.

Do you have any suggestions for a solution? Should I continue manipulating values within tables or should I explore alternative methods using DIVs?

html css forms tablelayout

Answer 1

Answer №1

My recommendation would be to utilize the div approach for creating layouts. By being cautious with your widths when using floats, achieving proper layout across various screen resolutions can be relatively straightforward.

Consider the following guidelines:

Set a maximum width for your form or its wrapper element. When floating elements on a single row, ensure that the combined widths do not exceed this set width.
If you are applying horizontal padding/margins to your floated elements, remember that these additions contribute to the total width of the element.
Avoid mixing percentage widths with pixel-based padding and margins. Allocate the percentage width to a parent element and the pixel-based padding/margins to a child element.
Insert clearing elements between rows to maintain alignment throughout the layout.

For markup, combine form elements with CSS to construct a semantic structure:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

Corresponding CSS styling:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

...

View the result here.

Answer 2

My recommendation would be to utilize the div approach for creating layouts. By being cautious with your widths when using floats, achieving proper layout across various screen resolutions can be relatively straightforward.

Consider the following guidelines:

Set a maximum width for your form or its wrapper element. When floating elements on a single row, ensure that the combined widths do not exceed this set width.
If you are applying horizontal padding/margins to your floated elements, remember that these additions contribute to the total width of the element.
Avoid mixing percentage widths with pixel-based padding and margins. Allocate the percentage width to a parent element and the pixel-based padding/margins to a child element.
Insert clearing elements between rows to maintain alignment throughout the layout.

For markup, combine form elements with CSS to construct a semantic structure:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

Corresponding CSS styling:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

...

View the result here.

Answer 3

Answer №2

If you're dealing with a table of fixed width, it's simple to arrange using divs and floats. Just specify the width for each element as needed.

But when working with a liquid-layout table—which is usually preferred—it becomes more challenging to create a form without resorting to table-style display properties. This is because attributes like float and position don't easily allow for calculations such as "this cell should take up half of the remaining width after allocating space for fixed-width labels."

In scenarios like this, particularly with a two-column form like yours, your best option is to utilize CSS display values related to tables. While you can use divs with display: table-row for modern browsers like IE8 and above, older versions including IE6-7 require actual <table>, <tr>, and <td> elements since they do not support table-CSS independently.

This approach is perfectly acceptable, as forms have a somewhat tabular structure and maintaining logical order in page content is key for accessibility.

Additionally, when working with liquid-layout forms, there's also the challenge of sizing input fields to align with their parent elements. While input { width: 100%; } gets close, it doesn't account for the border or padding that inputs typically have by default. To address this, you can leverage CSS3 box-sizing along with browser-specific versions for modern browsers. For precise alignment on older browsers like IE6-7, you may need to adjust the padding on parent elements to match the border/padding of the input field.

Answer 4

If you're dealing with a table of fixed width, it's simple to arrange using divs and floats. Just specify the width for each element as needed.

But when working with a liquid-layout table—which is usually preferred—it becomes more challenging to create a form without resorting to table-style display properties. This is because attributes like float and position don't easily allow for calculations such as "this cell should take up half of the remaining width after allocating space for fixed-width labels."

In scenarios like this, particularly with a two-column form like yours, your best option is to utilize CSS display values related to tables. While you can use divs with display: table-row for modern browsers like IE8 and above, older versions including IE6-7 require actual <table>, <tr>, and <td> elements since they do not support table-CSS independently.

This approach is perfectly acceptable, as forms have a somewhat tabular structure and maintaining logical order in page content is key for accessibility.

Additionally, when working with liquid-layout forms, there's also the challenge of sizing input fields to align with their parent elements. While input { width: 100%; } gets close, it doesn't account for the border or padding that inputs typically have by default. To address this, you can leverage CSS3 box-sizing along with browser-specific versions for modern browsers. For precise alignment on older browsers like IE6-7, you may need to adjust the padding on parent elements to match the border/padding of the input field.

Answer 5

Answer №3

Basic facts is a particular type of listing, consisting of key and value pairs - the ideal structure for this would likely be <dl />
Problem numbers exist in a tabular format,
Evaluations are also presented in table form,
Both Recovery and Signals are organized as lists - specifically unordered lists <ul />

Answer 6

Basic facts is a particular type of listing, consisting of key and value pairs - the ideal structure for this would likely be <dl />
Problem numbers exist in a tabular format,
Evaluations are also presented in table form,
Both Recovery and Signals are organized as lists - specifically unordered lists <ul />

Differences between using tables and divs for form layouts

Answer №1

Answer №2

Answer №3

Similar questions

The overflow:hidden feature doesn't appear to be functioning as expected

An improved solution for uploading images to the cloud in NextJS

Incorporate a unique identifier for dynamic elements

Designing webpages by superimposing text onto images with customizable positioning

Using javascript, hide or show a div without using jquery or the display:none property

What is the best method for positioning two forms in a vertical arrangement?

What are some ways to create a div section within a Google Map interface?

Craft a Flawlessly Repeating Sound Experience - Online

When I hover my mouse over the items on the Navigation bar, they shift forward

Unexpected Issues with the Ant Design Sidebar Layout Demo

A commonly used method to adjust the width of a table column to accommodate the size of the child element

What is the best way to have text wrap around an icon in my React application?

Removing items from a list in a Vue.js application

Creating a dropdown menu using Vue.js

Keep elements in position when their bottom edge becomes visible while scrolling

What is the reason for jQuery not detecting that a checkbox has been automatically checked?

Tips for organizing AJAX code to show images and videos in HTML with a switch case approach

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

"What's the best way to update the src attribute of an iFrame when a user clicks

Retrieving information from a server within several sections of a Flask application