HTML & CSS

Creare una tabella con i DIV

by Andrea Spera

In questo esempio, usiamo l'istruzione CSS display: table per creare una tabella con i DIV.
Codice 
<!DOCTYPE html>
<html>
<head>
<style>
div#tabella{
	position: static;
	display: table;
	border: 0;
	width: 80%;
	margin-left: 10%;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	border-left: 1px solid #aaa;
	text-align:center;
	font-size:14px;
	line-height:24px;
	}
.riga{
	position: static;
	display: table-row;
	width: 100%;
	}
.colonna1
	{
	position: static;
	display: table-cell;
	width: 50%;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	}
.colonna2
	{
	position: static;
	display: table-cell;
	border-bottom: 1px solid #aaa;
	}
</style>
</head>
<body>
<div id="tabella">
	<div class="riga">
		<div class="colonna1">
			R1, C1
		</div>
		<div class="colonna2">
			R1, C2
		</div>
	</div>
	<div class="riga">
		<div class="colonna1">
			R2, C1
		</div>
		<div class="colonna2">
			R2, C2
		</div>
	</div>
</div>
</body>
</html>
Output