Creating a tabular layout using div elements and CSS styling

Here is the css and html code that I am working with:

<style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
        border-radius: 1em;
    }

    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }

    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }

    br
    {
        clear: left;
    }
    .box_header {
  font-weight: 600;
  color: #000000;
  text-align: center;
  border-radius: 1em;

}
    </style>


   <div class="formLayout"  style="float:left; margin-left: 100px; margin-top:5em;">
            <div class="box_header">
             Install
    </div>
            <label>Type</label>
            <label>Amount</label>
            <label>Days</label>
            <br>
            <input id="type" name="type" size="25">
            <input id="amount" name="amount" size="5">
            <input id="days" name="days" size="5"><br>
        </div>

I need help aligning the labels and input boxes in a table format. Here's an example of what I'm aiming for:

<table align="center">
    <thead>
        <th>Type</th>
        <th>Amount</th>
        <th>Days</th>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>            
        </tr>                                
    </tbody>
</table>
csshtml

Answer №1

give this a shot :

CSS

.formLayout
{
    margin:auto;
    width:500px;
    border-radius:5px;
    border:1px solid #a1a1a1;
    background-color: #f3f3f3; 
}

.ins
{
    margin:auto;
}

.ins
{
    font-weight:bold;
    padding:10px;
}
.group-div
{
    text-align: center; 
}

.group-div td
{
    width:250px;
}

.group-div input[type="text"]
{
    padding:3px;
}

HTML CODE

<div class = "formLayout">
    <div class = "ins">
    <center>Install</center>
    </div>

    <div class = "group-div">
    <table>
    <tr><td><label>TYPE</label></td>    
        <td><label>AMOUNT</label></td>
        <td><label>DAYS</label></td></tr>       

    <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>

        <tr><td><input type = "text"></td>  
        <td><input type = "text"></td>
        <td><input type = "text"></td></tr>
    </table>
    </div>

even if the codes appear basic, i hope they are helpful nonetheless. best of luck! :)

take a look at my fiddle : http://jsfiddle.net/G4JRU/

Answer №2

Is this the information you were searching for?

http://jsfiddle.net/qPnYW/

   <div class="layoutStyle"  style="float:right; margin-left: 80px; margin-top:4em;">
        <div class="header_box">
             Set up
        </div>
        <label>Category</label><input id="category" name="category" size="25">
        <label>Price</label><input id="price" name="price" size="5">
        <label>Quantity</label><input id="quantity" name="quantity" size="5"><br>
   </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

The radial gradient in d3.js does not properly affect paths

My goal is to create a radial gradient on my path element, but for some reason the radial gradient does not apply correctly. Can anyone help me troubleshoot this issue? Below is my updated code: // Define the canvas / graph dimensions var margin = {top: ...

javascriptcssd3.js

My Ruby on Rails app seems to be malfunctioning in a major way

Instead of sharing code snippets, I’ve encountered difficulties in getting my jQuery code to work correctly. If you're curious, you can view the issues on Stack Overflow: Why doesn’t this jQuery code work? and This jQuery hide function just does n ...

javascriptjqueryhtmlruby-on-railsruby

AngularJS and Bootstrap carousel combined for a dynamic multi-item per slide display

Currently, I am utilizing Bootstrap to showcase a carousel on my website, where multiple items are displayed per slide as demonstrated in this example. The use of static images has yielded satisfactory results, as evidenced by the jsFiddle example found he ...

javascriptcssangularjstwitter-bootstrapcarousel

The JSON data response is not being properly displayed on the div element

I am having trouble with the success function in my ajax call. The data is processed correctly in the view and the ajax call works fine, but for some reason, the data is not getting appended to the div. Here is my jQuery: $(document).ready(function() { ...

javascriptjquerypythonhtmldjango

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at . $(".song-status-link").popover({ html: true, placement: 'bottom', ...

jquerycsstwitter-bootstrap-3popover

Arranging Nav Items in a Stack with Bootstrap 4

Struggling to create a unique navigation bar design with fixed elements on both the left and right sides. The challenge arises when scaling down to mobile, as the icons on the right end up stacking. Any suggestions on how to resolve this issue? <div ...

htmlcssreactjstwitter-bootstrap

Access a designated tab within a CSS-designed tab system

Can anyone offer some assistance? I currently have a tab structure created using CSS. The first tab is set as the default when the page loads. I am looking to create a link from another page that will take users directly to the page with the tabs and ope ...

javascriptphpcsstabs

I would appreciate your assistance in the modification of the input type from text to radio within the PHP code

I've been struggling to update the input type from text to a radio button for Gender selection in my Wordpress theme's user profile settings. I can't seem to get it right in the code and I'm not sure how to make the change. I tried usi ...

phphtmlwordpresscustom-fields

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Greetings! I would like to express my gratitude for this wonderful library! However, I am encountering an unusual issue when trying to wrap a tabset with tabs that are included separately. This can be done either by adding individual tab elements manually ...

javascriptjquerycssangularjstabs

Access a local website path using JavaScript upon opening the browser

I need a Javascript function that can determine the day of the week when my html file is accessed, allowing me to automatically open a specific sub-page within my project. ...

html

Is there a way to align this in a horizontal inline block?

I have this element and I would like it to display inline-block but horizontally. Currently, it is displaying as inline-block but vertically. Here is my HTML: <div class="ondisplay"> <div class="left-text"> <p&g ...

htmlcss

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css

What is the best way to create a sign-up box that appears on the same page when you click on the sign-up button

I am interested in implementing a 'sign up' box overlay at the center of my index page for new users who do not have an account. I would like them to be able to easily sign up by clicking on the 'sign up' button. Once they complete the ...

javascripthtmlcsstwitter-bootstrap

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

javascriptjqueryhtmlajax

Angucomplete Alternative solves the challenge of accessing remote URLs

I have been using the Angucomplete Alt directive for creating an autocomplete feature. It has been working well so far, but now I want to customize a specific request to be sent to my server. <div angucomplete-alt id="input-name" ...

javascriptangularjshtmlangularjs-directive

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

cssreactjssassflexboxmaterial-ui

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

javascriptjqueryhtmldatatablesaurelia

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

javascripthtmlhtml5-canvas