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

Create a new file using PHP by submitting a form in HTML

incorporating numerous interconnected javascript files within a single html document

User information in the realm of website creation

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

Deactivated dropdown menu options with the help of Twitter's bootstrap framework

Angular ng-show does not seem to evaluate properly

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

Incorporating components into Vue while utilizing Flask poses a challenge

What is the best way to maintain two distinct background effects that each require different pixel sizes?

Issues with custom logo and menu/sidebar toggle on Wordpress

Automatically save a dropdown menu selection

Gliding along a div and concealing it out of view, making it seem like it has disappeared

Using Django to dynamically fill out a form with data retrieved through ajax

What is the process for assigning a value to the body in a div element?

Achieving the perfect alignment: Centering a paragraph containing an image using JQuery

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

Is there a way for me to utilize the Bootstrap carousel without it adjusting the height as the user transitions from slide 1 to slide 2?

Switching hover behavior on dropdown menu for mobile and desktop devices

Tips for creating responsive elements with a z-index of 1 in CSS

Creating a unique Tag Name for Dynamic Components in Angular