CSS Hell simulating TABLE with DIV
Again, you should use a table.
But if this is just an exercise in CSS, for kicks...
- Ditch the
<div class="clear" />. - Ditch the background colors and use faux-columns instead.
- Don't put borders around the individual cells; instead put them around the rows.
- Give the rows an
overflow:hidden
Like so: http://jsfiddle.net/39F88/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Teste</title>
<style type="text/css">
table{
table-layout:fixed;
width: 333px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th, table td
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th.column1, table td.column1{
width:60px;
background-color:#CCD9FF;
}
table th.column2, table td.column2{
width:100px;
background-color:#ECFFE5;
}
table th.column3, table td.column3{
width:60px;
background-color:#FFEBE5;
}
table th.column4, table td.column4{
width:100px;
background-color: #FFFFCC;
}
div#tablecontainer
{
width:335px;
border-top:1px solid black;
background:url(http://i.stack.imgur.com/ZsO5U.png) TOP LEFT REPEAT-Y;
}
div.tablecontainerrow
{
clear:both;
overflow:hidden;
border:1px solid black;
border-top:none;
}
div#tablecontainer div div.column1
{
width: 62px;
float:left;
}
div#tablecontainer div div.column2
{
width: 104px;
float:left;
}
div#tablecontainer div div.column3
{
width: 62px;
float:left;
}
div#tablecontainer div div.column4
{
width: 104px;
float:left;
}
</style>
</head>
<body>
<h1>CSS and TABLE</h1>
<table>
<tr>
<th class="column1">Header 1</th>
<th class="column2">Header 2</th>
<th class="column3">Header 3</th>
<th class="column4">Header 4</th>
</tr>
<tr>
<td class="column1">line 1 column 1</td>
<td class="column2">line 1 column 2</td>
<td class="column3">line 1 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 2 column 1</td>
<td class="column2">line 2 column 2</td>
<td class="column3">line 2 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 3 column 1</td>
<td class="column2">line 3 column 2</td>
<td class="column3">line 3 column 3 (more content)</td>
<td class="column4">line 3 column 4</td>
</tr>
</table>
<h1>CSS and DIV</h1>
<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>
</body>
</html>
How to make div , span , or list display tabular data as a table?
You can use CSS and divs to emulate tables, with display:table;, display:table-row;, display:table-cell; etc.
Working demo on jsFiddle
HTML:
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action 1</div>
<div class="cell">Action 2</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Ann</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
<div class="cell">Another button</div>
</div>
</div>
</div>
CSS:
.table {
display:table;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
}
Supported by IE8+ (it's a CSS2.1 feature)
Further reading:
- www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
- www.onenaught.com/posts/201/use-css-displaytable-for-layout
- www.w3.org/TR/CSS21/tables.html#table-display
How do I create an HTML table with a fixed/frozen left column and a scrollable body?
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
Relevant HTML & CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>Why not use tables for layout in HTML?
I'm going to go through your arguments one after another and try to show the errors in them.
It's good to separate content from layout
But this is a fallacious argument; Cliché Thinking.
It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
So what? Does my boss care? Do my users care?
Depends. Is your boss pointy-haired? Then he might not care. If she's competent, then she will care, because the users will.
Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and css.
The majority of professional web developers seem to oppose you[citation needed]. That tables are in fact less maintainable should be obvious. Using tables for layout means that changing the corporate layout will in fact mean changing every single page. This can be very expensive. On the other hand, judicious use of semantically meaningful HTML combined with CSS might confine such changes to the CSS and the pictures used.
By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs.
Deeply nested <div>s are an anti-pattern just as table layouts. Good web designers don't need many of them. On the other hand, even such deep-nested divs don't have many of the problems of table layouts. In fact, they can even contribute to a semantic structure by logically dividing the content in parts.
Readability of the code
I think it's the other way around. Most people understand html, little understand css. It's simpler.
“Most people” don't matter. Professionals matter. For professionals, table layouts create many more problems than HTML + CSS. This is like saying I shouldn't use GVim or Emacs because Notepad is simpler for most people. Or that I shouldn't use LaTeX because MS Word is simpler for most people.
It's better for SEO not to use tables
I don't know if this is true and wouldn't use this as an argument but it would be logical. Search engines search for relevant data. While tabular data could of course be relevant, it's rarely what users search for. Users search for terms used in the page title or similarly prominent positions. It would therefore be logical to exclude tabular content from filtering and thus cutting the processing time (and costs!) by a large factor.
Tables are slower.
An extra tbody element has to be inserted. This is peanuts for modern web browsers.
The extra element has got nothing to do with tables being slower. On the other hand, the layout algorithm for tables is much harder, the browser often has to wait for the whole table to load before it can begin to layout the content. Additionally, caching of the layout won't work (CSS can easily be cached). All this has been mentioned before.
Show me some benchmarks where the use of a table significantly slows down a page.
Unfortunately, I don't have any benchmark data. I would be interested in it myself because it's right that this argument lacks a certain scientific rigour.
Most web sites that need an upgrade need new content (html) as well. Scenarios where a new version of a web site only needs a new css file are not very likely.
Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.
Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.
CSS Layout Question
Note: This has been abandoned as "unsolvable", a reasonable answer is given below, but the original problem question remains without a definite solution.
JS Fiddle: http://jsfiddle.net/steve/gHrce/
Does almost everything, may help put you on the right track.
CSS:
#img {
background:green;
float:left;
height:100px;
width:200px;
}
#sidebar {
background:red;
clear:both;
float:left;
width:200px;
}
#mainContent {
background:yellow;
margin-left:200px;
}
HTML:
<div id='img'>
IMG
</div>
<div id='sidebar'>
SIDEBAR
<br />
<br />
<br />
</div>
<div id='mainContent'>
MAIN CONTENT
<br style='clear:both' />
</div>
That extra <br /> at the bottom forces the height of the main content to whatever the sidebar height is.
The <br /> tags in the sidebar are just to provide some extra height for demonstration purposes.
Of course, you can add Javascript pretty easily to expand the sidebar's height, but it smells strongly of hack:
if($('mainContent').offsetHeight > $('sidebar').offsetHeight + 100) {
$('sidebar').style.height = $('mainContent').offsetHeight - 100 + 'px';
}
CSS - float:left alignment issue
Looks like your padding on photo is causing the issue. Since there isn't enough hight in each row its over laping into the next. Simple example to show the issue. (It can be solved by either removing the padding or adding more height)
Change:
.myForum > .myrow > .photo {
overflow: hidden;
width:105px;
float:left;
text-align:center;
padding-right: 2px;
padding-top:2px;
height:57px;
}
To
.myForum > .myrow > .photo {
overflow: hidden;
width:105px;
float:left;
text-align:center;
height:57px;
}
Example
How do I force a DIV block to extend to the bottom of a page even if it has no content?
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
This site has some excellent examples:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
Related Topics
Opera and Custom Cursor in CSS
Using :Last-Child with Class Selector
404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Forward Slash/In CSS Border Radius Syntax
Bottom-Border Hover Transition
How to Invert Stroke Text Color Depending on Background
Differencebetween the Selectors ".Class.Class" and ".Class .Class"
Fluid Container in Bootstrap 3
How to Remove an Element from the Flow
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)
How to Style Disabled Options in a Form
Nesting Selectors via Loops with SASS
Concatenate String in Less in Loop
Confused by CSS Pseudo-Class :Active
Codeigniter - Simple Base_Url Question
Using Createmuitheme to Override Default Styles on Div'S, P'S, Body