Tips for properly indenting checkbox and radio button elements in HTML code

Check out my live code demo here

This is a simple html code where I am attempting to indent radio buttons and checkboxes, but it's proving to be difficult.

<tr>
            <td>
                <table>
                    <tr>
                        <td>Select from 1</td>
                    <tr>
                        <td><INPUT name="all" type="radio"></td>
                        <td>all item</td>
                    </tr>
                    <tr>
                        <td><INPUT name="x" type="checkbox"></td>
                        <td>x item<INPUT TYPE="text" size="8"></td>
                    <tr>
                        <td><INPUT name="y" type="checkbox"></td>
                        <td>y item<INPUT TYPE="text" size="8"></td>
                    </tr>
        </tr>
        </tr>
</table>
<table>
    <tr>
        <td>Select from 2</td>
    </tr>
</table>
</td>
</tr>

The current output resembles this:

https://i.sstatic.net/1gTld.png

However, what I'm aiming for is this:

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

I am looking to indent the x item and y item checkboxes. When using colspan="2", only the text gets indented and not the entire body (checkbox and text). Is there any way I can shift this snippet to the right?

<tr>
<td><INPUT name = "y" type="checkbox"></td>
<td>y item<INPUT TYPE="text" size="8"></td>
</tr>
htmlcss

Answer №1

If you're in search of a similar solution, take a look below.

Here is a different approach:

I devised a new table with the checkboxes enclosed within radio button td

<table>
    <tbody>
        <tr>
            <td>Choose from Option 1</td>
        <tr>
            <td style="vertical-align: baseline;"><INPUT name="all" type="radio"></td>
            <td>all item
                <table>
                    <tr>
                        <td><INPUT name="x" type="checkbox"></td>
                        <td>x item<INPUT TYPE="text" size="8"></td>
                    <tr>
                        <td><INPUT name="y" type="checkbox"></td>
                        <td>y item<INPUT TYPE="text" size="8"></td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>Pick from Choice 2</td>
        </tr>
    </tbody>
</table>

Answer №2

One way to expand the width of the first column is by using colspan.

<tr>
  <td>
    <table>
      <tr>
        <td>Choose from option 1</td>
      <tr colspan="2">
        <td>
          <INPUT name="all" type="radio">
        </td>
        <td>all items</td>
      </tr>
      <tr>
          <td></td>
        <td>
          <INPUT name="x" type="checkbox">
        </td>
        <td>x item <INPUT TYPE="text" size="8">
        </td>
      <tr>
          <td></td>
        <td>
          <INPUT name="y" type="checkbox">
        </td>
        <td>y item <INPUT TYPE="text" size="8">
        </td>
      </tr>
</tr>
</tr>
</table>
<table>
  <tr>
    <td>Choose from option 2</td>
  </tr>
</table>
</td>
</tr>

Answer №3

Another way to indent text is by using the label element, similar to how you would use the td element.

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

Automate the process of launching the <select> picker through programming

In an Android WebView, I need a way to programmatically trigger the opening of the select element picker provided below. <select id="select1" multiple="multiple"> <option value="MDO1" selected="selected">MDO 1</option> <option val ...

javascriptandroidhtmlwebkit

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

phphtmlcss

Why is Django saving Model B and C data in Model A incorrectly?

I'm encountering an issue with the Django models CustomerDetail, CarrierForm, and InfluencerModel. Whenever I attempt to save data in the CarrierForm or InfluencerModel through different forms on various pages, the data is getting saved in the Custome ...

pythonhtmldjangodjango-modelsdjango-forms

The div element is not expanding as expected, causing the content to overlap

In my code, I have a portfolio-container div with two images and paragraphs inside a list element. The issue I'm facing is that the div is not expanding vertically, causing the images and paragraphs to overlap with the footer below. I've attempte ...

htmlcss

Learn how to simultaneously play two audio files using the same identifier in JavaScript

I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...

javascriptphphtmljqueryaudio

Why Electron is refusing to open a JSON file

Currently, I am attempting to populate filenames using JSON for the onclick='shell.openItem('filename') function. While the console.log(data[i].url) correctly displays the kmz files for each button, I encounter an error when clicking a butto ...

javascriptjqueryhtmljsonelectron

The table does not recognize any of the CSS classes when the TAG is inputted inside

I am currently working on a challenging form for players to save their personal character sheets in a database. To achieve this, I am incorporating numerous Input TAGs and utilizing tables for layout purposes, ensuring an organized and efficient design. E ...

cssinputhtml-tableuser-agent

Running a MySQL query within a WordPress post using shortcode? Keep it in the post and avoid sending it to the footer with

My MySQL code is functioning perfectly, and I have created a custom shortcode to embed the content within a post. However, I am facing an issue where the shortcode is executing below the footer. Initially, I suspected it was a problem with a plugin or them ...

phphtmlcssmysqlwordpress

As I populate my mobile content, background images are being stretched out

I'm currently in the process of enhancing my website by incorporating background images using the background property. My goal is to ensure that each image fills the width and height of its container without sacrificing quality or aspect ratio. Here i ...

htmltwitter-bootstrapcss

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

javascripthtml

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

csslistcss-float

React component failing to display CSS transitions

The task at hand requires the component to meet the following criteria: Items in a list should be displayed one at a time. There should be two buttons, Prev and Next, to reveal the previous or next item in the list. Clicking the Back/Next button should tr ...

cssreactjstransition

What are the steps to adjusting page margins for Kindle devices?

While converting an HTML page for Kindle, I encountered a problem with multiple CSS files. The Kindle Guide recommends setting the left and right margins to 0 for normal body text in order to prevent content from falling off the edge of the screen or overl ...

csshtmlkindle

Set the height of the div element to be the same as its parent element (100

Within my main div, there are two child divs. I want the first child div to have the same height as the parent div, without specifying a height in CSS. For reference, take a look at this example: http://jsfiddle.net/x8dhnh4L/ The pink div should expand to ...

htmlcssheight

Glitch in Mean App: front-end feature malfunctioning during data storage in mongodb

I am encountering difficulties while working on a MEAN app. I attempted to establish a connection between the backend (Node.js, Express.js) and the frontend (Angular 6), but encountered some issues. The backend port is http://localhost:3000, and the fron ...

javascripthtmlnode.jsangular

What is the best way to enlarge icons and space them out evenly along a single line?

Would anyone be able to assist me in increasing the size of and separating these three icons that are close to each other using CSS3 in a single line? I am utilizing Bootstrap5 and Google Icons. <link href="https://fonts.googleapis.com/icon?family= ...

cssbootstrap-5

Encountering a problem when transitioning Bootstrap 3 code to version 5

After finding this template on github, I noticed it was a bit outdated with the use of Bootstrap 3. I decided to update it to Bootstrap 5 and replaced the Bootstrap 3 CDN accordingly. However, upon doing so, I encountered some issues. Can anyone help me ...

htmlcssbootstrap-4frontendbootstrap-5

PHP updating data in a MySQL database

I've been using easyPHP and encountering issues with updating records in my database. Whenever I try to update, the HTML form displays <?php echo $btitle; ?> and <?php echo $bauthor; ?> instead of updating the data. However, it does print ...

phphtmlmysqldatabase

Having trouble retrieving data from a contact form with php, js, and ajax?

I am facing an issue with my contact form on a website. I am unable to receive the filled fields from the contact form via email. Can someone please help me figure out what is wrong with the code or suggest an alternative solution? Any assistance in fixing ...

javascriptphphtmlajax