tabella con div

**webhome** · 23-12-2011, 13:35

Raga come creo una tabella del genere con i css?

codice:

  <table width="250" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td height="17"></td>
      <td></td>
      <td height="17">[img]close.png[/img]</td>
    </tr>
    <tr>
      <td width="17" height="17">[img]borderTopLeft.png[/img]</td>
      <td width="100%" background="borderTopCenter.png"></td>
      <td width="17" height="17">[img]borderTopRight.png[/img]</td>
    </tr>
    <tr>
      <td height="100%" style="background:url(borderMiddleLeft.png) repeat-y"></td>
      <td bgcolor="#FFFFFF">contenuto</td>
      <td height="100%" style="background:url(borderMiddleRight.png) repeat-y"></td>
    </tr>
    <tr>
      <td width="17" height="17">[img]borderBottomLeft.png[/img]</td>
      <td width="100%" background="borderBottomCenter.png"></td>
      <td width="17" height="17">[img]borderBottomRight.png[/img]</td>
    </tr>
  </table>

o melgio ci riesco ma vorrei che qualsiasi cosa menel contenuto quello intorno si ripete e si allunga rispetto ad esso..proprio come fa la tabella.

**ResianTaxidrive** · 23-12-2011, 14:30

Guarda cun un <div>, a meno che tu non gli fissi delle dimensioni, si allarga in relazione al contenuto.

**carlomarangoni** · 23-12-2011, 23:58

prova così

codice:

<html>
	<head>
		<title></title>
		<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
		<style type="text/css">.ts-1 {
	border: 1px outset #f0f0f0;
	text-align: left;
	width: 248px;
}

.ts-1-1 {
	border: 1px inset #f0f0f0;
	clear: both;
	float: left;
	overflow: hidden;
	padding: 0px;
}

.ts-1-2 {
	border: 1px inset #f0f0f0;
	float: left;
	overflow: hidden;
	padding: 0px;
}

.ts-1-3 {
	border: 1px inset #f0f0f0;
	float: left;
	line-height: 28px;
	padding: 0px;
}

.ts-1-4 {
	border: 1px inset #f0f0f0;
	clear: both;
	float: left;
	line-height: 17px;
	padding: 0px;
}

.ts-1-5 {
	background-image: url('borderTopCenter.png');
	border: 1px inset #f0f0f0;
	float: left;
	overflow: hidden;
	padding: 0px;
}

.ts-1-6 {
	border: 1px inset #f0f0f0;
	float: left;
	line-height: 17px;
	padding: 0px;
}

.ts-1-7 {
	background: url('borderMiddleLeft.png') repeat-y;
	border: 1px inset #f0f0f0;
	clear: both;
	float: left;
	overflow: hidden;
	padding: 0px;
}

.ts-1-8 {
	background-color: #ffffff;
	border: 1px inset #f0f0f0;
	float: left;
	line-height: 19px;
	padding: 0px;
}

.ts-1-9 {
	background: url('borderMiddleRight.png') repeat-y;
	border: 1px inset #f0f0f0;
	float: left;
	overflow: hidden;
	padding: 0px;
}

.ts-1-11 {
	background-image: url('borderBottomCenter.png');
	border: 1px inset #f0f0f0;
	float: left;
	overflow: hidden;
	padding: 0px;
}
</style>
	</head>
	<body>
		<div class="ts-1">
			<div class="ts-1-1"></div>
			<div class="ts-1-2"></div>
			<div class="ts-1-3">[img]close.png[/img]</div>
			<div class="ts-1-4">[img]borderTopLeft.png[/img]</div>
			<div class="ts-1-5"></div>
			<div class="ts-1-6">[img]borderTopRight.png[/img]</div>
			<div class="ts-1-7"></div>
			<div class="ts-1-8">contenuto</div>
			<div class="ts-1-9"></div>
			<div class="ts-1-4">[img]borderBottomLeft.png[/img]</div>
			<div class="ts-1-11"></div>
			<div class="ts-1-6">[img]borderBottomRight.png[/img]</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**ResianTaxidrive** · 24-12-2011, 14:02

carlo scusami, ma ti sembra normale usare tutto questo po po' di codice????E poi che è tutto sto utilizzo di div vuoti? Non so, non sono d'accordo con una cosa del genere.

**carlomarangoni** · 26-12-2011, 17:30

Originariamente inviato da ResianTaxidrive
carlo scusami, ma ti sembra normale usare tutto questo po po' di codice????E poi che è tutto sto utilizzo di div vuoti? Non so, non sono d'accordo con una cosa del genere.

**ResianTaxidrive** · 27-12-2011, 05:10

Webhome, potresti postare una immagine di quel che vorresti ottenere?

Discussione: tabella con div

Strumenti discussione

Ricerca discussione

Visualizza

tabella con div

Permessi di invio