Is it time to switch out HTML tables for Divs?

Question

Is it time to switch out HTML tables for Divs?

I am looking for advice on creating a consistent header for all of my website pages. Currently, I use a div element to wrap a table that contains one row with three cells.

These cells hold three images: one in the top-left corner, one in the top-center, and one in the top-right corner of the page.

The code snippet I have been using is:

<div class="div_Header">
  <table class="table_Header">
    <tr>
      <td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
      <td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
      <td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
    </tr>
  </table>
</div>

I currently use CSS styles to position the images accordingly. However, I am wondering if there is a better way to achieve this layout. If so, how would you suggest updating the code?

css html

Answer 1

Answer №1

Typically, a solution involving three floated divs within a wrapper is the preferred method.

<div>
  <div id="d1">left</div>
  <div id="d2">right</div>
  <div id="d3">center</div>
</div>


#d1 {
  float: left;
  border: 1px solid red;
}


#d2 {
  float: right;
  border: 1px solid blue;
} 

#d3 {
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid green;
}

Check it out here: http://jsbin.com/evagat/1/edit?html,css,output

Answer 2

Typically, a solution involving three floated divs within a wrapper is the preferred method.

<div>
  <div id="d1">left</div>
  <div id="d2">right</div>
  <div id="d3">center</div>
</div>


#d1 {
  float: left;
  border: 1px solid red;
}


#d2 {
  float: right;
  border: 1px solid blue;
} 

#d3 {
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid green;
}

Check it out here: http://jsbin.com/evagat/1/edit?html,css,output

Answer 3

Answer №2

Apply the style display:inline-block to all the div elements

div {
  display: inline-block;
  width: 100%;
  text-align: center;
}
div > div {
  width: auto;
}
div > div:first-child {
  float: left
}
div > div:last-child {
  float: right
}

<div>
  <div id="d1">content 1</div>
  <div id="d2">content 2</div>
  <div id="d3">content 3</div>
</div>

Answer 4

Apply the style display:inline-block to all the div elements

div {
  display: inline-block;
  width: 100%;
  text-align: center;
}
div > div {
  width: auto;
}
div > div:first-child {
  float: left
}
div > div:last-child {
  float: right
}

<div>
  <div id="d1">content 1</div>
  <div id="d2">content 2</div>
  <div id="d3">content 3</div>
</div>

Answer 5

Answer №3

It seems like what you're looking for is a table with a background for each row. Unfortunately, this cannot be achieved out-of-the-box. However, there are alternatives you can consider:

Avoid using HTML table tags as they have multiple drawbacks and may be rendered differently by various browsers, especially Firefox. Instead, utilize CSS declarations for styling.
For each cell, use the background-image: url('') property to customize the appearance of the image. This will give you more control over the visuals, particularly in a responsive layout. You can target specific cells using :nth-child(1,2,3,etc..) within the HTML tags or :nth-of-type(1,2,3,etc..) if you opt for using classes for the divs.

Alternatively, you could implement @briansol's float trick as a secondary option. Keep in mind that floats are not typically recommended for web design purposes.

Answer 6

It seems like what you're looking for is a table with a background for each row. Unfortunately, this cannot be achieved out-of-the-box. However, there are alternatives you can consider:

Avoid using HTML table tags as they have multiple drawbacks and may be rendered differently by various browsers, especially Firefox. Instead, utilize CSS declarations for styling.
For each cell, use the background-image: url('') property to customize the appearance of the image. This will give you more control over the visuals, particularly in a responsive layout. You can target specific cells using :nth-child(1,2,3,etc..) within the HTML tags or :nth-of-type(1,2,3,etc..) if you opt for using classes for the divs.

Alternatively, you could implement @briansol's float trick as a secondary option. Keep in mind that floats are not typically recommended for web design purposes.

Is it time to switch out HTML tables for Divs?

Answer №1

Answer №2

Answer №3

Similar questions

Embedding SVG styling directly into the HTML document

Adding a certain number of days to a date within an existing ng-module in AngularJS

Could you please provide instructions on how to manipulate the :root CSS variable using JQuery?

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

Utilizing Multiple Checkboxes for Precision Search Refinement

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

Using window.open and appending a new feature to it

How can I extract data from a swiffy animation?

Selections made from the dropdown menu will automatically generate additional fields in the

What is the best way to only load a specific div from another webpage onto my own webpage without loading the entire page?

The PHP index is not being identified when accessed through the post method

What is the best way to integrate HTML code within a JavaScript function?

Using Puppeteer to Retrieve Data from a Web Page with Multiple Divs of the Same Class

Move the button text back to its original position with animation

To modify the color of the breadcrumb navigation bar from purple to #d6df23 using PHP

Leverage jQuery to retrieve information and fill in an HTML form

Having trouble with HTML code displaying correctly in R leaflet for labels instead of popups

Solving the style upload issue with NextJS and Module Federation in ReactJS

The jQuery attr() method is universally compatible across platforms and stands independent

Using @font-face to include several files for different font-weight variations