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

Modify the background color of <td> elements depending on the specific value

I attempted to implement this approach, but unfortunately it is not working as expected. I found guidance from this source. Below is the code I am using: $today = date('Y-m-d'); $date = new DateTime(); $R1D2 = $date->setISODate($year,$week,1 ...

phphtmlcss

Operating PHP program from html on Beaglebone Black Rev C Debian

I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...

javascriptphphtmlmysql

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

javascriptjqueryhtmlangularjsservice

How can I add seconds to the jquery datetimepicker plugin?

Looking to implement the datetimepicker plugin from here, but I'm having trouble finding information on how to include the seconds part. Is there a way to add seconds to this plugin? It's a crucial requirement, so any suggestions for another good ...

javascriptjqueryhtmlnode.jsdatetimepicker

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

javascripthtmlcssanime.js

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

htmlcssinternet-explorerfirefoxcross-browser

Ensuring JS consistently monitors changes in value

Is there an equivalent of (void update) in Unity that is called every frame in Web Development (using JavaScript)? "I want it to continuously check if certain values have changed and then update them accordingly." let governmentprice = parseFloat(select ...

javascripthtmlcss

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

Hacking through external script injections into the browser

Curious about how certain software or programs are able to inject html,css,js into a web browser without the need for installing any extensions. Every time I open Chrome or Firefox, I'm bombarded with ads on popular sites like Google homepage, Faceboo ...

javascripthtmlcsscode-injection

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

htmlcssangularjs

Tips for positioning text on the left and right sides of a div in HTML styling

I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the ...

javascripthtmlcssreactjs

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Adjust the appearance of self and other classes on hover using CSS

I'm looking for a way to use the :hover effect in CSS to change the font color of one class (.footer_status_tex) and the background color of another class (.footer_status_gear). Here's a simplified version of what I have in mind: CSS .footer_s ...

csshover

Issue encountered when toggling flip switch in Jquery Mobile

I am trying to create a calculator for my app using Jquery Mobile, but I am facing an issue with the flip toggle switch. Here is my script: <script type="text/javascript"> function dosis() { $peso = $('#peso').get(0).value $dosis = ...

javascripthtmljquery-mobile

Tips on how to prevent a video from playing in the background of a popup even after it has been closed

After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in ...

jqueryhtmlcss

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

javascripthtmlcss

What is the best way to combine two variables from separate codes?

To calculate the total sum of the values generated from "sum1" and "sum2," and then add that sum to the class ".results-6". HTML <p class="results-4"></p> <p class="results-5"></p> <p class="results-6"></p> jQuery $( ...

jqueryhtml

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

Stop iFrame from inheriting parent CSS styles

Is there a way to prevent an iFrame object from inheriting CSS properties from the main page? Specifically: I have created an iFrame object in my main class, and I want to adjust the opacity of the main page without affecting the iFrame. However, when I ...

htmlcssiframe