O Wikipedia define tableless como:
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C , pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares. Para a disposição da página o recomendado seria usar CSS.
Uma coisa que sempre me causa dor de cabeça é fazer alinhamento vertical de elementos. Quanto mais elementos diferentes na mesma linha, mais complicação.
Já pesquisei várias soluções e muita são 'meia-boca'. Porém tem uma que achei bastante satisfatória, é a seguinte:
.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>
Porém o código acima apenas faz com que as divs se comportem como se fosse uma tabela... O código acima está em desacordo com o conceito de tableless?
Devo evitar esse tipo de implementação???