Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Divs to display table-like data

Tags:

css

I want to display data like the following:

 Title     Subject    Summary    Date

So my HTML looks like:

<div class="title"></div>
<div class="subject"></div>
<div class="summary"></div>
<div class="date"></div>

The problem is, all the text doesn't appear on a single line. I tried adding display="block" but that doesn't seem to work.

What am I doing wrong here?

Important: In this instance I dont want to use a table element but stick with div tags.

like image 530
public static Avatar asked Sep 22 '08 03:09

public static


People also ask

How do I make a div behave like a table?

To make DIVs behave like TABLEs, you have to tell them to behave that way using the display property. The three key values that we'll be using are table , table-row and table-cell . Each element now behaves like it were part of a table. In doing so, it also inherits cell capabilities.

Can I use div instead of table?

So, when creating a table, all you need to do is, instead of the HTML 'table' tag, merely use the 'div' tag and add the corresponding CSS to display a table. Here's an example to walk you through the process of creating a table.

Are Divs better than TABLEs?

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.).

Why are people making TABLEs with divs?

Basically by giving it a hint that column sizes aren't changing, then the browser starts rendering tabular data immediately. Ultimately this means that tables can actually display in the correct position faster than divs giving them the appearance of being better.


1 Answers

It looks like you're wanting to display a table, right? So go ahead and use the <table> tag.

like image 56
Andy Lester Avatar answered Dec 09 '22 15:12

Andy Lester