What is the best way to implement this table design using proper markup?

In order to maintain the tables while using CSS for proper positioning with a strict doctype, I have come up with a design that perfectly meets my needs.

Take note of the <br> tags in the last (bottom) <td> cell. Despite the growth in this area, the data within the two other <td> cells above it remains in their original position.

<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr>
          <td valign="top">ds</td> <----- The position here is important
        </tr>
        <tr>
          <td valign="bottom">ds</td> <----- The position here is important
        </tr>
      </table>
    </td>
    <td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
  </tr>
</table>
htmlcss

Answer №1

I have created a demonstration here to illustrate how simple it is to replicate that table using Divs and CSS:

HTML:

<div id="main-div-wrap">
                <div class="left-content">
                <span class="top">ds</span>
                <span class="bottom">ds</span>
                </div>
                <div class="right-content">
                    ada adf ad
                </div>
</div>

CSS:

#main-div-wrap
{
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid #000;
}

.left-content
{
    width: 18%;
    float: left;
    height: 100%;
}

.right-content
{
    margin-left; 18%;
    width: auto;
    float: left;
    height: 100%;
    border-left: 1px solid #000;
}

.top 
{
    position: absolute;
    display: block;
    top: 0;
}

.bottom 
{
    position: absolute;
    display: block;
    bottom: 0;
}

No hacks, fully semantic code that will validate. If adjustments are needed for different browsers, there are plenty of resources available such as CSS browser selectors and more tools.

Answer №2

I'm not exactly sure what you mean by "keeping the tables for the structure", but I believe you're looking for something similar to this. However, if the content is too brief, the texts labeled as "top" and "bottom" might end up overlapping.

http://jsfiddle.net/BsZdK/

Here's an alternative approach using CSS styled tables:

http://jsfiddle.net/NpL88/

Answer №3

Discover everything you seek right here.

Answer №4

As someone who typically works with table layouts, I have often struggled with the DIV layout. I recommend checking out Blueprint CSS, it's a user-friendly CSS framework that could help simplify things for you.

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

Having trouble with clearing divs function not working as expected

I'm facing a challenge in properly aligning 3 div elements without resorting to adding padding at the bottom of the wrapping div, which isn't the most practical solution. Check out the issue demo here How would you suggest addressing this parti ...

htmlcss

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

htmlcssangulartypescript

Is there another way to retrieve a marketplace's product details using code?

When it comes to scraping products from various websites, I have discovered a clever method using window.runParams.data in the Chrome console. This allows me to easily access all the information without having to go through countless clicks to extract it f ...

javascriptpythonhtmlweb-scraping

I'm looking for a way to incorporate JavaScript code within an iframe tag. Specifically, I'm attempting to embed code into a Wix website using the "Embed HTML

Trying to execute the code below on a Wix website using "Embed HTML", but IFRAME is blocking scripts. Seeking help to embed custom HTML with JavaScript on platforms like Wix.com or Wordpress.com, as the embedded code is not functioning due to IFRAME restri ...

javascripthtmlwordpressiframevelo

What is the best way to use Bootstrap to position form input at the bottom of a page?

Does anyone have any tips on aligning a bootstrap form input to the bottom of the page? I've tried a few different methods but haven't had any luck. Here's how it looks currently. And here's how I'd like it to look. I'm aim ...

htmlcssbootstrap-4

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive. However, one major issue I've ...

htmlcssrubyflexboxhaml

"JavaScript code for creating a dynamic switching effect in HTML

I currently have 4 divs on my webpage that can be hidden or shown using JavaScript when clicking the menu at the top of the page. Here is my current script: <script type="text/javascript"> function showHide(d) { var onediv = document.get ...

javascriptjqueryhtml

The random sorting algorithm in the query_posts function is disrupting the formatting of the CSS

<?php query_posts($query_string . '&orderby=rand') ?> Hello everyone, I recently added the code snippet above to my portfolio page template.php. You can view it at However, I've noticed that sometimes the CSS breaks when you rel ...

phpcsswordpressrandomsql-order-by

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

What is the best way to include personalized attributes in a form_for?

Here is the code I am working with: <%= form_for @quiz do |f|%> <% @questions.shuffle.each do |q| %> # get_answers returns an array of 4 random answers <% answers = q.get_answers %> <%= f.label q.inquest %><br> ...

htmlruby-on-railsrubyerb

Is there a way to stop ng-repeat in AngularJS 1.2 from encoding or escaping my content, or do I have to create my own directive for this?

Is there a way to stop ng-repeat in AngularJS 1.2 from encoding or escaping my content without creating a custom directive? I know that ng-bind-html-unsafe is no longer supported in Angular 1.2, but I'm unsure about its compatibility with ng-repeat. S ...

javascripthtmlangularjshtml-encode

Switch up the color of checkboxes with a dropdown menu option

I have an HTML dropdown code and I am trying to trigger a click event when a specific value is selected. Once this value is clicked, I want some checkboxes to change color. <select> <option value="calculate">calculate</option> ...

javascripthtmldrop-down-menu

Image background is not showing up in the input field

It seems like I've hit a roadblock with this issue. Despite my best efforts, I can't seem to find a solution. You can view the problem LIVE HERE. The banner's two input boxes should have background images displayed, but they are not showin ...

htmlcss

What causes the cancel button to add spaces and create a line break in the textarea field?

Whenever I click the "cancel" button, the textarea inexplicably receives 26 spaces before any existing text and a carriage return after it. This issue occurs when the cancel button is styled in the traditional HTML manner: <button type="reset" name="re ...

htmlangularjstextareacancel-button

Dynamic transition when selecting a navigation bar link in Bootstrap

Check out my website here: On my webpage, I have 3 navigation links which are: Who We Are What We Do Contact Us I have set up the "a href" tag to link to each section of the page when clicked. My query is, how can I create a sliding effect when clicki ...

htmlcsstwitter-bootstrapbootstrap-4

Rgd: Double-Sided Horizontal Slide Control

While browsing the internet, I came across several examples of horizontal sliders with adjustable values. For example, if I set the maximum value as 100 and move the slider 10 sectors to the left, each sector would decrease by 10. What I am trying to ach ...

javascriptjqueryhtmlcss

In Angular 4, when choosing an option, only the Display Id is shown, not the Name

I'm currently working with Angular 4 Web API to display packingtypename when an option is selected. Everything is working fine, but I am facing an issue where only the packingtypeID is saved when clicking the add button. I would like to save both the ...

htmlangulardomangular-forms

Update the available choices in one select field based on the choice made in another

I am working on a feature where users can select their country, either USA or Canada. Currently, I have all the American states listed in one dropdown menu. However, I want this dropdown to change to display Canadian provinces when users select Canada. Bel ...

javascriptjqueryhtmlcssjquery-ui

Having trouble with your HTML iFrame not functioning properly?

My code is not working as expected and I'm puzzled by it. It was working fine yesterday but now it's giving me trouble. <iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.co ...

javascripthtmliframe

Aligning a label in the center of a horizontal layout's vertical axis

Struggling with centering a QLabel vertically in a QHBoxLayout. Here's the relevant part of my code: QFrame* topBar = new QFrame(); topBar->setStyleSheet("background-color: #2c3d50;border-bottom: 3px solid #2c92b6;"); topBar->setSizePolicy(QSiz ...

c++cssqtuser-interfacepadding