Customizing the appearance of tables and forms

Typically, I have always designed forms by customizing each property individually. However, I have recently come across a lot of information about styling forms using tables. One issue I've encountered with tables is that when one cell is quite large, all other cells in the same column automatically adjust to the same width. This can create problems such as large gaps between input fields or uncomfortably close spacing when resizing the screen.

I attempted to set the widths of the <td> individually, but that did not solve the problem. To seek assistance and guidance on this matter, I created a fiddle for reference.

Thank you all in advance for any help you can provide!

http://jsfiddle.net/uFwkd/

htmlcsshtml-table

Answer №1

The contents of the table shown in the provided jsfiddle (which appears to be the main focus of the question) consist of rows with varying numbers of cells, for example:

<tr>
<td><input type="text" name="name" id="name" value="" size="30" /></td>
<td><input type="email" name="email" id="email" value="" size="30" /></td>
</tr>

<tr>
<td>Date:</td>
<td>Time:</td>
</tr>

This leads to inconsistencies in how the table is displayed.

To improve the structure, it is recommended to ensure that each row has an equal number of cells (in this case, 2), by utilizing the colspan attribute on certain cells (for instance, in the first row above, using <td colspan="2">. In situations where a row contains fewer cells, one cell would need to span multiple columns.

However, this approach may result in a less intuitive layout as the relationship between cells within a column would be somewhat arbitrary. Additionally, it could lead to accessibility issues. A more suitable tabular arrangement for a form involves having one row per input control (each field represented by its own input element), with the label in one column and the input field in another. For example:

<table>
<tr><td><label for="username">Username:</label></td>
    <td><input type="text" name="username" id="username" value="" size="20" /></td>
    </tr>

Answer №2

When it comes to laying out a form, the debate between using divs and tables is ongoing. Here are some general guidelines to consider:

  • Tables should be used solely for display purposes
  • Divs are recommended for form layout

If you are currently using a table for your form layout, you may want to explore the option of converting it into a div.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Jquery button click event not triggering

I'm facing an issue that seems simple, but the solutions provided for a similar problem don't seem to be working for me. My aim is to trigger an AJAX request when a button is clicked, but it doesn't seem to be happening. Here's an exa ...

javascriptjqueryhtmlajax

What is preventing me from running my alert script in JavaScript?

Need some assistance here. I have a simple question. I am trying to create an alert function using JavaScript, but it is not working. <script type="text/javascript"> $(".delete").click(function(){ alert("Are you sure?&q ...

javascripthtmljqueryalert

The functionality of Wow.js seems to be malfunctioning. Could this be due to incorrect initialization or script calls?

I'm facing some difficulties implementing wow.js into my HTML code. Could it be due to missing script loads or incorrect script loading? Is there a chance I'm not initializing wow.js properly? Although the nav part won't be utilizing animati ...

javascripthtmlanimate.csswow.js

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

cssflexboxsveltekit

What steps can I take to stop a website in an iframe from causing the entire page to refresh?

My website includes an iframe that showcases different websites submitted by users. This feature works well, but there is an issue with certain sites causing the whole page to refresh and redirect users away from my site. I want to prevent this initial r ...

phpjavascriptjqueryhtmlmysql

Seeking assistance with images for a website

I'm currently working on a school project where we are creating a website. However, I've encountered an issue with an image. It's a bit difficult to explain, so I've uploaded a video to help illustrate the problem. Essentially, I want t ...

htmlcssimageheightwidth

Seeking assistance with aligning CSS inline elements in Servicenow platform

As a beginner in front-end development, I have created a simple form with 4 fields. My question is how to align all these fields in one line equally divided? Below is the code snippet written in HTML along with the output: <div> <form> & ...

htmlcssbootstrap-4

Utilizing Javascript to set the innerHTML as the value of a form

I have written a JavaScript code that utilizes the innerHTML function, as shown below: <script> var x = document.getElementById("gps"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showP ...

javascripthtml

Building Angular Components in a Single Instance

I am working on an angular webpage that showcases a list of items. Each item is displayed within a div through iteration. Below is the HTML code snippet for this functionality: <div ng-repeat="item in items"> <div class="item-title-section"&g ...

javascriptjquerycssangularjsstatic

The error detected in the W3Schools validator pertains to CSS for audio elements that do not contain

Could somebody kindly explain why this code is being flagged as an error on w3schools? audio:not([controls]) { display: none; height: 0; } ...

cssaudiocontrols

Setting CSS attributes based on the parent node: What you need to know

Here is my CSS code snippet: .over_center { position:absolute; top: 50%; left:50%; height: 160px; /* two thirds (2/3) of parent size */ width: 160px; /* two thirds (2/3) of parent size */ margin-top: -80px; /* negative one third of parent size */ margin-l ...

htmlcss

Positioning two elements next to each other and keeping them aligned evenly

CSS - How to Float Two Elements Side by Side I am facing a similar challenge in achieving the layout I want. With a percentage-based layout, either my menu overlaps with the content or the content gets pushed below the menu when viewed on mobile devices. ...

htmlcss

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

I am currently working on a responsive form that contains 1 label, 1 input field, and 5 buttons. Both the buttons and the input field are located under col-8. The positioning I aim for the buttons is as follows: They should start below and align with ...

htmlcssbootstrap-4responsive-designfrontend

What is the best way to adjust the size of an image as I navigate down a webpage?

I've been working on designing a navigation bar for a website, but I'm running into some issues. My goal is to have the logo shrink as the user scrolls down the site. I've experimented with webkit animations and various javascript/jQuery fun ...

javascriptjqueryhtmlcssnavbar

Experiencing difficulties when attempting to access a relative URL in a Javascript xmlhttp object

Recently, I took on the task of managing an HTML/PHP/Javascript application that lacked proper directory structure; everything was crammed into one folder. My goal was to organize and modularize the files, so I decided to move them around. (*.inc files ...

javascriptphphtmlcssajax

What are the steps for implementing the innerClass style on the searchBox within the appBase?

I'm currently incorporating the searchBox component from appbase io into my upcoming js web application, but I've been facing challenges in customizing the layout of both the search box and the list. Despite following the documentation which sug ...

cssreactjsobjectnext.js

Adjust top position dynamically during resizing

When resizing the window, I am facing an issue with the image going outside of the box. I believe adjusting the position top of the image based on the box height might help in fitting the image properly within the box. $(window).resize(function() { va ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

I'm currently working on creating a 360-degree view using the SpriteSpin API. Everything is functioning as expected, but I have an additional request. I need to specify a specific image to be the initial landing image when the page loads. The landing ...

javascriptjqueryhtmlcss

Prevent user input in a text box once a radio button is clicked

I have been attempting to create a JavaScript function that will disable a textbox when a radio button is selected. I have four different options for the radio buttons, each with a corresponding textbox. However, even when I select radio button 2, I am s ...

javascripthtmljquery

Bootstrap Model Footer Button Alignment

click hereI'm facing an issue while adding buttons to the model footer. The buttons are not aligning in line, instead they move to the next line. <div class="modal-footer"> <form method="post" action="admin_view"> ...

phphtmlcsstwitter-bootstrap