facebook-squared twitter-squared rss-squared gplus-squared

Monday

28

August 2017

0

COMMENTS

Tables still a choice for designing layouts

Written by on 28 August 2017

Speaking of tables in semantic markup, we are bound to use it only for tabular data. A data that comprise of rows and columns or a spreadsheet. But in CSS landscape we are free to turn any element into a table or even a table-cell. They would work and behave like a table and td to meet our design needs.

That said.

Flexbox and CSS Grid support have increased. There are here to solve our layout problems. But still we get into a design situation to go for tables instead of these new css layout modules.

Backstory

Currently I am working on an old project. I had to lean on to the old css practices to solve problem. I don’t have any freedom of using these new shiny tools like Flexbox, CSS Grids. In such conditions I came across problems like equal heights and vertical center align a complex layout. So that’s how I dealt with those problems. And that’s we will not dicuss Flexbox and CSS Grid Solutions

Equal Heights

We have to two sibling elements. They sit next to each other. They both have content but one element is taller than other one. One column has more content. Here is the markup

<div class="container">
 <div class="img-object">
 <img src="http://lorempixel.com/150/110/technics/" alt="">
 </div>
 <div class="text-object">
 <h3>This is headline</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repudiandae aliquam fugit laboriosam nam qui ducimus quod fuga quae est architecto tempora, iure dolore dolorum aperiam. Id nam delectus repudiandae.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit iste obcaecati ab quod. Assumenda quo, impedit debitis excepturi dolore ipsam officiis suscipit eos ipsa, recusandae dolor animi alias quaerat!</p>
 </div>
</div>

and a bit of css

.img-object{
 float: left;
 width: 33%;
 background: tomato;
}

.text-object{
 float:left;
 width: 67%;
 background: steelblue;
}

and that’s how it looks so far.

Unequal heights of two adjacent columns

Don’t you see something wrong with this picture. The column with the background color of tomato color need to extend its height. That’s because we haven’t set its fixed height. It’s considered a best practice to let the content define the element height. You can use a faux column solution to fix it.

We can also use JavaScript by checking the height of elements. Calculating which one is taller and applying it on both of them.

But today I’m gonna solve it with tables without doing any math.

.img-object{
display: table-cell;
 background: tomato;
}

.text-object{
 display: table-cell;
 background: steelblue;
}

By looking at above code, we had to add display:table-cell property and that’s it. We don’t need to float the elements or specify width. And the result is awesome.

columns with equal height using table-cell property

We are getting the equal height thanks to the tables.

Vertical Align

There is no one size fit all solution of vertically align an element in center. You need to check whether element is relative or absolute. If relative than, is it a single line or multiple. You can find all permutations over at this article.

But what if we go with table-cells and just add the vertical-align: center property as.

.img-object{
display: table-cell;
 vertical-align:middle;
}

Now our .image-object element will be vertically center aligned. Here is the preview

Vertically center align using css vertical-align: center property

Conclusion

I think I have spoken enought to prove the point. Which is, to when and why use the table layout properties in CSS. I do want to write a follow up post where I’ve designed yet another complex layout, all with css table properties.

Leave a Reply

%d bloggers like this: