Looking to align a table in the middle of a fieldset in a form?

Seeking assistance with a CSS alignment challenge I'm facing while learning in an online course. The goal is to align labels and input fields within a form inside a fieldset within a table, creating a split down the middle effect. Images of current progress and desired outcome are provided for reference.

If anyone proficient in CSS could lend guidance, I would greatly appreciate it!

Current Progress: https://i.sstatic.net/6zVe1.jpg

Desired Outcome: https://i.sstatic.net/Pobkb.jpg

Note: Repetitive code in the images can be ignored; focus is on label, input, and button alignment.

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test 2</title>
        <link rel="stylesheet" type="text/css" href="test2.css">
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Personal Information</legend>
                <table>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                </table>
            </fieldset>

            <fieldset>
                <legend>Registration Information</legend>
                <table>
                   <tr>
                        <td><label>First Name:</label></td>
                        <td><input type="text"></td>
                    </tr>
                </table>
            </fieldset>

            <fieldset>
            <legend>Submit Your Registration</legend>
                <table>
                    <tr>
                        <td><input type="submit"></td>
                        <td><input type="reset"></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

CSS Code:

body {
    background-color: #A8F89C;
    margin: auto;
    width: 50%;
}

table {
    width: 400px;
    table-layout: fixed; 
}

fieldset {
    width: 410px;
    margin: auto;
    width: 50%;
}

legend {
    font-size: 16px;
    font-weight: bold;
}

label {
    font-size: 14px;
    color: #06127D;
}

td label {
    font-weight: bold;
    padding-right: 7px;
}

td input {
    padding-left: 7px;
}

form input {
    width: 140px;
}

label input[type="radio"] {
    font-size: 14px;
    color: #201E1C;
}

button {
    width: 75px;
    font-weight: bold;
    background-color: rgb(28,67,14);
}

Any input or assistance on this matter will be highly valued - thank you!

htmlcss

Answer №1

After reviewing your specifications, I have come up with a solution for you.

To achieve the desired layout, you can implement the following CSS:

https://i.sstatic.net/Pobkb.jpg 
<style>
fieldset,table{
   width:100%
}
td{
   width:50%;
}
tbody tr td:first-child{
   text-align:right;
   padding-right:20px;
}

Please let me know if this suits your requirements.

Thank you!

Answer №2

One solution I propose is to include the following CSS code (since the label does not occupy the entire width of the td as it is not a block level element)

td label{
    width:100%;
    display: inline-block;
    text-align:right;
}

Alternatively, you could also try something like this instead

td {
    text-align: right
}

However, this will cause all td elements to shift to the right.

Answer №3

Snippet provided below

If necessary, remove the border

body {
  background-color: #A8F89C;
  margin: auto;
}

table {
  table-layout: fixed;
}

fieldset {
  width: 410px;
  margin: auto;
  text-align: center;
}

legend {
  font-size: 16px;
  font-weight: bold;
}

label {
  font-size: 14px;
  color: #06127D;
}

td label {
  font-weight: bold;
  padding-right: 7px;
}

td input {
  padding-left: 7px;
}

form input {
  width: 140px;
}

label input[type="radio"] {
  font-size: 14px;
  color: #201E1C;
}

button {
  width: 75px;
  font-weight: bold;
  background-color: rgb(28, 67, 14);
}

table {
  border: solid red;
  display: inline-table;
}

fieldset {
  border: solid blue;
}

td:nth-child(1) {
  text-align: right
}
<!DOCTYPE html>
<html>


<head>
  <title>Test 2</title>
  <link rel="stylesheet" type="text/css" href="test2.css">

</head>



<body>

  <form>
    <fieldset>

      <legend>Personal Information</legend>
      <table>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
      </table>
    </fieldset>
    <fieldset>

      <legend>Registration Information</legend>
      <table>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
        <tr>
          <td>
            <label>First Name:</label>
          </td>
          <td>
            <input type="text">
          </td>
        </tr>
      </table>

    </fieldset>
    <fieldset>

      <legend>Submit Your Registration</legend>
      <table>
        <tr>
          <td>
            <input type="submit">
          </td>
          <td>
            <input type="reset">
          </td>
        </tr>
      </table>
    </fieldset>
  </form>

</body>


</html>

Answer №4

It might be easier to use a div element instead of tr and td in your HTML code. I made some modifications to your code by replacing the tr and td with div elements. I hope this helps!

<div align = "center">
            <label>First Name:</label>
            <input type="text">
           </div>

https://i.sstatic.net/iU1GK.png

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

What is the best way to extract text from multiple "div class" (html) elements in R?

My objective is to collect data from this html page in order to build a database: https://drive.google.com/folderview?id=0B0aGd85uKFDyOS1XTTc2QnNjRmc&usp=sharing One of the variables I am interested in is the price of the apartments. I have noticed th ...

htmlcssrregexrvest

Revamping the appearance of bootstrap checkbox buttons while addressing the issue of missing hover functionality

I am attempting to modify the color of a bootstrap 5 btn-outline-primary button. You can view an example at https://jsfiddle.net/nct2dpvf/17/. In the provided example, the standard button (with the class btn-outline-primary) does not change color on hover ...

htmlcssbootstrap-5

Launch a new pop-up window with a specific size to display the form

I need to implement functionality for a Submit button on my new form that passes parameters to another page and opens a new pop-up window sized to specific dimensions. I already have this working with a hyperlink, but now I need the same functionality fo ...

javascripthtmlformssubmit

How can I toggle the radio button based on the dropdown selection?

I'm attempting to enable or disable a radio button based on the selection from a dropdown menu. View my jsfiddle example here For example, if the user selects "persons" from the dropdown, only the options for Anthony and Paul should be available to ...

javascripthtmljquery

Clicking inside the bootstrap modal does not trigger the ng-click event

I encountered an issue while trying to implement the "ng-click" function from Angular into an HTML page. It worked initially, but when I tried using the same "ng-click" function within a Bootstrap modal, the code stopped functioning. Can anyone explain why ...

htmlangularjstwitter-bootstrapangularjs-scope

Transforming DOM elements into Objects

Here are some values that I have: <input name="Document[0][category]" value="12" type="text"> <input name="Document[0][filename]" value="abca.png" type="text" > I am looking for a way to convert them into an object using JavaScript or jQuer ...

javascriptjqueryhtml

Ways to display or conceal form controls when altering select box choices

In my HTML, I have two select boxes: the first for Country and the second for City. The requirement is to display a textbox when a user selects a country other than Pakistan and show a dropdown list for city if the user selects Pakistan from the country dr ...

javascriptjqueryhtmlcss

Combining two kebab-case CSS classes within a React component

import React from 'react'; import styles from './stylesheet.moudle.css' <div className={styles['first-style']} {styles['second-style']}> some content </div> What is the correct way to include styles[&ap ...

javascripthtmlcssreactjs

If the first dropdown menu has a sub-element, then the user should be able to select the same value in the second dropdown menu using jQuery

To trigger an alert, two HTML select option dropdowns must both have the value DIP EDU. My current code successfully accomplishes this, but there is a scenario where some options in the first dropdown may contain sub-elements. For example, selecting MBA wi ...

javascriptjqueryhtml

Unable to display content when the button is triggered

I am facing an issue with hiding a div (class="login-form") and displaying it only after clicking the Login button on my HTML page using jQuery. However, despite clicking the button, the login form does not appear. Can anyone help me understand why this ha ...

javascriptjqueryhtmlcssstylus

What is the purpose of setting the image border to inline block?

When I added a span element as the circular border to my image, which is placed inside a span tag, I observed that the span tag was being pushed down. By giving the span a display:inline-block property, the issue was resolved. But why does this happen? ...

htmlcss

Placement of image links

Wondering if there's a way to accomplish this. Can a hyperlink be placed on specific coordinates within an image? Example: _____________________________________ | | | xxx | | xxx ...

javascripthtml

The top header must remain fixed at the top, while the bottom footer should stay fixed at the bottom of the page. The main div will then adjust to fill

My HTML code is structured using Bootstrap to create a grid layout. The goal is to have the NAV BAR and FOOTER contained within the left container, allowing the SIDEBAR on the right to display without overlapping. Here's an example image of what I&apo ...

htmlcssreactjsbootstrap-4

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...

javascriptjqueryhtmlcss

What could be causing the decreasing opacity of lines at the edge of my HTML5 canvas?

I have embarked on the journey of creating a bar graph using an HTML5 canvas. The process involves a series of lines drawn with the help of .moveTo(), .lineTo(), and .stroke(). Below is the code snippet I am using for this purpose. Although I am new to wo ...

javascripthtmlcanvashtml5-canvas

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

htmlarraysjsonangulartypescript

Is there a way to dynamically adjust the overflow-y property based on the height?

Trying to make the overflow-y-visible property visible if the height is too small, otherwise using overflow-y-hidden with tailwind CSS and React. Struggling to achieve this as I can't use sm, md, etc. for height like I can for width. Could someone pl ...

cssreactjstailwind-css

Animate the page transition with jQuery once the CSS animation finishes

My screen is split in two halves, and when you click on a side, they are supposed to slide open like curtains and then fade into another page. I have successfully created the animation using CSS and jQuery to add the appropriate class on the click event. ...

javascriptjqueryhtmlcssanimation

showing database table contents on a website page

What is the best way to retrieve data from a MySQL database that corresponds to user input on a web page, and then showcase the content without having to reload the page using PHP or another suitable language? I would greatly appreciate any assistance wi ...

phpmysqlajaxhtml