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.
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.
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.
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.).
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.
It looks like you're wanting to display a table, right? So go ahead and use the <table> tag.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With