Formatting table with CSS

HTML & CSS
1

Hello,

I would like to position 5 images in a table-like format.

What would be an ideal way to do this with CSS? I can do this easily with a data table, but would prefer to use CSS.

Thanks

2

HI,

If the data is tabular then use a table as that’s what they are designed for ans is the semantic element to use.

If the data is not tabular then for IE8+ you could do this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1 { text-align:center }
.wrap {
	width:80%;
	margin:auto;
	border:1px solid #000;
}
.row {
	display:table;
	width:60%;
	margin:auto;
	border:1px solid #000
}
.box {
	display:table-cell;
	border-right:1px solid #000;
	padding:5px;
	width:33%;
}
.row2 { border-top:none; }
.row2 .box { width:33% }
.top { border-bottom:1px solid #000 }
.last { border:none }
</style>
</head>

<body>
<h1>IE8+</h1>
<div class="row top">
		<div class="box">Row 1 Cell a</div>
		<div class="box">Row 1 Cell b</div>
		<div class="box last">Row 1 Cell c</div>
</div>
<div class="row row2">
		<div class="box">Row 2 Cell a</div>
		<div class="box last">Row 2 Cell b</div>
</div>
</body>
</html>

It all depends on the exact dynamics you want as you could float instead if you didn’t need equal heights.

3

Thanks

4