Creating a layout resembling a table using CSS and HTML without actually using the <table> element

Question

Creating a layout resembling a table using CSS and HTML without actually using the <table> element

Despite searching on various platforms, I have not found a satisfactory solution to my issue.

To demonstrate the problem with using a table, I have attached a screenshot:

The bottom two rows are structured as tr and td within a table. Though the alignment of labels and textfields is perfect, attempting to style a well class around these two rows would result in failure. This is because tables do not allow the presence of a div; they only accept tr and td.

To address this limitation, I decided to separate the first two rows from the table and convert them into pure divs. The outcome can be seen in the grey well above.

<div class='well'>
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

Although the well class now encompasses the two rows beautifully, the alignment has been disrupted. How can I maintain centering while ensuring vertical alignment of the text-fields?

html css

Answer 1

Answer №1

To achieve a similar effect using div elements, you can utilize the display property with values like table, table-row, and table-cell:

Sample HTML structure:

<div class='container'>
  <div class="row">
    <div class='box'> Content 1 </div>
    <div class='box'> ... </div>
  </div> 
  <div class="row">
    <div class='box'> Content 2 </div>
    <div class='box'> ... </div>
  </div>
</div>

CSS styling:

div {
    border: 1px solid #333;
}

.container {
    display: table;
    width: 70%;
}

.row {
    display: table-row;
}

.box {
    display: table-cell;
    width: 50%;
}

By structuring your content this way, you can achieve a table-like layout while maintaining semantic markup. This method can also help in resolving issues related to accommodating remaining space columns :)

http://jsfiddle.net/Your_Name/example/

Answer 2

To achieve a similar effect using div elements, you can utilize the display property with values like table, table-row, and table-cell:

Sample HTML structure:

<div class='container'>
  <div class="row">
    <div class='box'> Content 1 </div>
    <div class='box'> ... </div>
  </div> 
  <div class="row">
    <div class='box'> Content 2 </div>
    <div class='box'> ... </div>
  </div>
</div>

CSS styling:

div {
    border: 1px solid #333;
}

.container {
    display: table;
    width: 70%;
}

.row {
    display: table-row;
}

.box {
    display: table-cell;
    width: 50%;
}

By structuring your content this way, you can achieve a table-like layout while maintaining semantic markup. This method can also help in resolving issues related to accommodating remaining space columns :)

http://jsfiddle.net/Your_Name/example/

Answer 3

Answer №2

Initially, the structure of this code needs some refinement. Here is a modified version:

<form>
    <fieldset>
        <label for="input_1">Title:</label>
        <input type="text" name="input_1" id="input_1">
    </fieldset>
    <fieldset>
        <label for="input_2">Due Date Time*</label>
        <input type="text" name="input_2" id="input_2">
    </fieldset>

</form>

When it comes to styling, consider the following CSS rules:

fieldset {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

It may also be beneficial to explore alternative structures like using fieldsets and definition lists instead of div class="row". Refer to this resource for more insights on that.

Answer 4

Initially, the structure of this code needs some refinement. Here is a modified version:

<form>
    <fieldset>
        <label for="input_1">Title:</label>
        <input type="text" name="input_1" id="input_1">
    </fieldset>
    <fieldset>
        <label for="input_2">Due Date Time*</label>
        <input type="text" name="input_2" id="input_2">
    </fieldset>

</form>

When it comes to styling, consider the following CSS rules:

fieldset {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

It may also be beneficial to explore alternative structures like using fieldsets and definition lists instead of div class="row". Refer to this resource for more insights on that.

Answer 5

Answer №3

I prefer using unordered lists (ULs) for organizing forms. Check out this example: http://jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Name:</label><input type="text" /></li>
        <li><label>Email:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}

Answer 6

I prefer using unordered lists (ULs) for organizing forms. Check out this example: http://jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Name:</label><input type="text" /></li>
        <li><label>Email:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}

Answer 7

Answer №4

For those looking for an alternative solution, consider giving this method a try:

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

Check out the demo: here

Answer 8

For those looking for an alternative solution, consider giving this method a try:

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

Check out the demo: here

Creating a layout resembling a table using CSS and HTML without actually using the <table> element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adjust the background shade of specific characters within an input text field

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

Challenge with CSS Box Shadow

HTML mandatory field not functioning effectively

Looking to conceal the children of other parents when clicking on a specific parent element?

What are some ways to enable text highlighting when it is disabled?

Utilizing display: flex for creating table padding

What could be causing the filter method to malfunction?

Retrieving paragraph content by scanning for text within bold tags

Tips for converting mobile numbers into clickable links using JavaScript

The br tag in HTML cannot be utilized in conjunction with JavaScript

The issue with Bootstrap 4 Card Flex Width not functioning properly seems to be unique to Firefox

Module not found in Node.js environment (webpack)

The top margin is experiencing issues and is not functioning correctly

What is the best way to adjust the canvas size within a list item?

Tips for Omitting Hours, Minutes, and Seconds from AngularJS Date Display

Ways to maximize the value of an inline class

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

The integration of jQuery Masonry with margin-right for a seamless and

Interactive menu backdrop determined by div element