Doubt about vertical and tableless alignment

Question

Wikipedia defines tableless as:

Tableless is a form of website development that does not use tables for content layout on the page suggested by W3C, as it argues that HTML codes should be used for the purpose they were created, and tables were created to display tabular data. For page layout the recommended would be to use CSS.

One thing that always gives me a headache is doing vertical alignment of elements. The more different elements in the same line, the more complication.

I have researched several solutions and many are 'half-mouth'. But there is one that I found quite satisfactory, is the following:

    .t{display:table;border:1px solid red;}
    .td1,.td2{display:table-cell;vertical-align:middle;padding:10px;}
    

    <div class="t">
     <div class="tr">
       <div class="td1"><img src="https://www.cdn.renault.com/content/dam/Renault/BR/personal-cars/duster-oroch/packshot/duster-oroch-lateral-passageiro.jpg.ximg.l_4_m.smart.jpg"></div>
       <div class="td2"><p>ESSE É O MEU CARRO</p></div>
     </div>
    </div>
    

But the above code only makes the Divs behave as if it were a table... The above code is at odds with the concept of tableless?

I must avoid such implementation???

Answer 1

But the above code only makes the Divs behave as if it were a table... The above code is at odds with the concept of tableless?

It does not escape the concept of tableless, this concept aims much more exterminate the old way of developing pages through the tag that had a series colspan, very little css and what little it had spread in the middle of the page. Also the tag table not created to layout.

The most famous example I can mention is Bootstrap. It uses at various points the style file (CSS) display table and table-Cell in some classes such as:

• input-group
• input-group-btn
• media-body
• media-left
• media-right

Anyway, don’t worry about it. The Tableless, as I said, comes with the intention of saying that the tag should be used for its purpose and not to create layout.

I must avoid such implementation?

You can continue using, but knowing that this type of display is not compatible with all browsers and is usually used as fix in the layout. If you find another way to leave your layout the way you want, do it, if you don’t find it, even after searching the net, use it without problems. After all, as I mentioned Bootstrap uses and he is a reference in what refers to CSS within the current standard, including when it comes to responsiveness (which is not the subject of this question, but worth noting).

I also left a very interesting article below about the anti-hero of the CSS layout "display: table".

I hope I helped you.

---

Just one observation:

If you have difficulties creating the layout, implements the Bootstrap in your project, it is a hand on the wheel and I quite like to use it. It has several fix for various browsers and removes some boring patterns from the browser.

Links that can help

I recommend some articles on display and table type display below:

• CSS-Tricks - Display
• W3school
• The CSS anti-hero - "display:table"

Answer 2

Hadrian,

Even not using table you are still thinking "like tables" and it shouldn’t be so, you need to think of building tableless layouts as "blocks". Imagine building a wall, each block will have its position relative to the blocks around it, but unlike a wall on the web you can also use absolute positioning that allows you to position a block where you want using as reference a parent element.

The vertical alignment will not be a problem using css attributes "margin" or "padding" but normally the vertical alignment will occur with the construction of your site, this is an image may be below a series of other elements like paragraphs, titles or even other images and this way will give its vertical alignment.

But if you still want to have the distance control of one block element to another consider using "margin" or "padding", but they have difference

margin: defines the margin of an object in relation to the gift (roughly the window) it is worth noting that the coordinates on the web start at the top left corner. The margin attribute affects the element coordinate in relation to the gift or the element it is child or surrounding elements, so you have control of the margins (left, right, top and bottom).

padding: this is a little different from margin, because this does not affect the positioning of the element but of the content within the element, it seems confusing but it is very simple imagine a div with a paragraph inside, changing the padding (padding) of the div I can change the positioning of the content within that element, in this case the paragraph.

to never get confused between margin and padding always think "Margin is the margin of the element and padding the filling of this element"

Good Adriano, this is a rather long explanation, but I tried to be as simplistic and didactic as possible, of course there are many things and details not mentioned as well as a number of particularities, but given the vastness of the question I have tried to bridge the gap between such a comprehensive question and a succinct answer.

hug