Doubts about vertical and tableless alignment

Navigation
1

Wikipedia defines tableless as:

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

One thing that always causes me headache is to do vertical alignment of elements. The more different elements on the same line, the more complication.

I have researched several solutions and a lot of them are 'half-mouth'. But there is one that I found quite satisfactory, it 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><divclass="td2"><p>ESSE É O MEU CARRO</p></div>
     </div>
    </div>

But the above code only causes the divs to behave like a table ...

The code above disagrees with the concept of tableless?

Should I avoid this kind of implementation ???

    
asked by anonymous 10.06.2016 / 08:49

2 answers

1
  

But the above code only causes the divs to behave like a table ...

The code above disagrees with the concept of tableless?

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

The most famous example I can mention is Bootstrap . It uses the table and table-cell displays in several classes of the style file (CSS), for example:

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

Well, do not worry about it. Tableless, as I said, is meant to say the tag should be used for its purpose, not to create layout .

  

Should I avoid this kind of 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 it, do it, if you do not find it, even after searching the net, use it without any problems. After all, as I already mentioned Bootstrap uses it and it is a reference in regards to CSS within the current standard, even when it comes to responsiveness (which is not the subject of this question, but it's worth pointing out).

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

I hope I have helped you.

Just a note:

If you're having trouble creating your layout, implement Bootstrap in your project, it's a hand in the wheel and I really enjoy using it it. It has several fix for various browsers and removes some browser patterns from your browser.

Links that may help

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

15.06.2016 / 04:44
0

Adriano,

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

Vertical alignment will not be a problem using css "margin" or "padding" attributes but normally the vertical alignment will occur with the construction of your site, ie an image may be below a series of other elements such as paragraphs, titles or even other images and that way will be vertical alignment.

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

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

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

To never get confused between margin and padding always think "Margin is the edge of the element and padding the fill of that 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 series of particularities, but given the vastness of the question I tried to the gulf between such a comprehensive question and a succinct answer.

Embrace

    
13.06.2016 / 21:17
SDL - C - How to check if the mouse pointer is over an image? Background transition with gradient