I’m looking for the best way to display the attached, a list of names and dates shown in 2 columns. I’m not keen on using tables although I could probably come up with an argument as to why it is a table. I’m not sure if it a 4-column list or 2 columns each of which comprises 2 columns.
Any ideas welcome. Thanks
There is actually no reason not to use a table, for you can actually style a table pretty nicely with CSS. The big turn off tables have is when they are used for the whole website, it makes people cringe thinking of the early days of the web.
Actually, as I understand it, while tables were created to display tabular data, the table is actually read and parsed twice upon page load - once for structure/styling, and then again for data.
While computers are becoming faster, it’s still an extra step. That’s why many developers go for table-less design.
You could use one main DIV as a main-content ‘wrapper’ that will use the default display:block;, then insert two DIVs into that as display:inline; and give them each width:50%; for your outer two-column format.
To make sure that everything is lining up properly, each of those would contain a single DIV (again, default display:block;) that will contain two display:inline; width:50%; divs - one for name, one for year(s). Duplicate for the outer second column.
Just my two cents.
The data you have there looks like a valid use of table to me.
Unlike a regular list, the data in adjacent columns do relate to one another, which is tabular data in my book.
I would use a table because that is what it is.
If I was dead set against using a table I would consider a dd - though that is NOT what it is.
Assigning {table-layout:fixed} parses the table only once. By default, the columns will be of equal width regardless of content. Otherwise, it depends on the values given by the coder being trustworthy.
PS: it looks tabular to me, too.
Many thanks for the thoughts and comments guys. I think I might do it as a table after all. The only point that makes it not a table in my eyes is the order. Assuming there are 50 names and dates - and I haven’t counted how many there actually are - row 1 will contain name1, date1, name26 and date26, row 2 will contain name2, date2, name27 and date27.
It probably doesn’t matter much in this case, but this was one reason I wasn’t so keen on tables.
I think I know what you mean.
this is TABULAR data, but it’s a table composed of two columns: NAME and TIME RANGE. that just happen to be laid out side by side. There is probably NO RELATION between Bartley, Wallace C.G and Jordan, Nelson B. is there?
IF you can control how the data is output, I would suggest CHUNKING IT. put the first half of the data on one table and the rest on another then float the tables side by side.
I’d probably be inclined to make use of css3 columns and put the data in a list.
That will automatically create the columns from one simple list. The relationship between the name and date should be pretty implicit.
<li><b>Adam2</b> <span>1935-40</span> </li>
A screenreader shouldn’t have any problem with that as it will get “Adam 1935-40” but obviously not as semantic as an html table.
Although putting two different items in the same html table row will cause some confusion as the relationship will not spread all along the row. You would probably need to split the row into th and td sections along with the scope or headers attributes.
I would try two floated definition lists because less script (no rows) or special formatting. Should also be easy for RWD.
Agreed. I should have clarified that I was not thinking of a table with four columns. Rather two tables side-by-side. If the number of rows fluctuates, the end of the first table and beginning of the second table can be accomplished by inserting the appropriate HTML tags at the half way point with JS or (preferably) serverside.
CSS3 columns are slick
Ah, decisions, decisions! Having recently converted another table to a dl, I like the idea of two dl’s.
Again, thanks for your input chaps.
I wasn’t aware of css3 columns. That’s something I will find useful for a site I recently did a RWD re-build on. One page had a longish list that was in 2 separate list columns. I had to do it as two lists floated side by side, but was trying for a way to keep it as a single list.
I’m rather bummed that I cannot “like” this more than once.
V/r,
Yes, exactly what I have been looking for. It has solved my problem. It only took me so long to get working because I did not realise at first that Firefox needs the pre-fixes.
My very first CodePen:
PHP Source Code:
<?php
?><!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title> CSS - Heading background color with padding</title>
<style type="text/css">
body {font-family: Tahoma, Arial, sans-serif;}
.jb {
float:left;
width:30%;
min-width:300px;
max-width:600px;
margin:1em auto 1em 1em;
background-color: #efefef; border:dotted 1px red;
}
.jb dt,
.jb dd{
display:inline-block;
margin:0;
padding:0;
}
.jb dt{
width:70%;
font-weight:700;
}
.jb dd{
width:30%;
margin: -2em 0 1em 0em;
}
</style>
</head>
<body>
<h2>RWD - Using Definition List </h2>
<?php
$vals = [
'Adam with longer text' => '1935-40',
'Adam2 ' => '1935-40',
'Adam3 ' => '1935',
'Bert ' => '1935-40',
'Bert 2 ' => '1935-40',
'Bert 3 ' => '1935-40',
'Chris ' => '1935',
'Chris 2 ' => '1935-40',
'Chris 3 ' => '1935-40',
'Edward ' => '1935-40',
'Freddie ' => '1935',
'George ' => '1935-40',
'Harold ' => '1935-40',
'Ian ' => '1935-40',
'Jim ' => '1935',
'Kevin ' => '1935-40',
'Lee ' => '1935-40',
'Malcolm ' => '1935-40',
'Nigel ' => '1935',
'Oswald ' => '1935-40',
'Paul ' => '1935-40',
'Quentin ' => '1935-40',
'Robert ' => '1935',
'Steve ' => '1935-40',
'Unwin ' => '1935-40',
'Vince ' => '1935-40',
'William ' => '1935',
'Xavier ' => '1935-40',
'Young ' => '1935-40',
'Zygo ' => '1935-40',
];
$i2=0;
$ix=14;
foreach ($vals as $name => $date) :
if($i2 % $ix ===0) {
echo "\n" .'<dl class="jb">';
}
echo "\n<dt>" .$i2 .' - ' .$name .'</dt><dd>' .$date ."</dd>" ;
$i2++;
if($i2 % $ix ===0) {
echo '</dl>';
}
endforeach;
echo '</dl>';
?>
</body>
</html>
Just to say I went for Paul’s css columns/list in the end. Works a dream. Thanks Paul. I’m thinking of getting a codepen account too…
Am I right in thinking that you can’t use css columns on an actual table? As in to get a table like the OP which is one, two column table, continued in a second column.
I just tried that, but can’t get it to work. Maybe I’m missing a trick, or it just doesn’t work.
You can if you make the parent the columns and not the table.
e.g.
<div class="names">
<table >
<tr>
<td>test</td>
<td>test</td>
</tr>
etc...
.names {
margin:0 auto;
padding:0;
max-width:600px;
list-style:none;
-webkit-column-count: 2;
-webkit-column-gap: 50px;
-webkit-column-rule: 1px solid #fc0;
-moz-column-count: 2;
-moz-column-gap: 50px;
-moz-column-rule: 1px solid #fc0;
column-count: 2;
column-gap: 50px;
column-rule: 1px solid #fc0;
}
I don’t have it working. What’s wrong?:-
I don’t actually need it, but was curious if it can be done and it may be a good solution for the OP.