Layout tabella per oggetti

**bako** · 20-04-2009, 16:55

Salve
ho delle difficoltà a mettere i tag html e css per fare una tabella coem la seguente:

qualcuno riesce a darmi una mano?

**Gufo** · 20-04-2009, 17:19

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div-1 {
	border: 1px outset #e0dfe3;
	height: 11.31em;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 30.56em;
}

.div-1-1 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 0.06em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	top: 0.06em;
	width: 30.06em;
}

.div-1-2 {
	border: 1px inset #e0dfe3;
	height: 7.44em;
	left: 0.06em;
	line-height: 7.44em;
	padding: 3px;
	position: absolute;
	text-align: center;
	top: 1.75em;
	width: 8.94em;
}

.div-1-3 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 9.50em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	top: 1.75em;
	width: 20.63em;
}

.div-1-4 {
	border: 1px inset #e0dfe3;
	height: 2.38em;
	left: 9.50em;
	padding: 3px;
	position: absolute;
	top: 3.44em;
	width: 20.63em;
}

.div-1-5 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 9.50em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	top: 6.31em;
	width: 12.06em;
}

.div-1-6 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 22.06em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	text-align: right;
	top: 6.31em;
	width: 8.06em;
}

.div-1-7 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 9.50em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	top: 8.00em;
	width: 12.06em;
}

.div-1-8 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 22.06em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	text-align: right;
	top: 8.00em;
	width: 8.06em;
}

.div-1-9 {
	border: 1px inset #e0dfe3;
	height: 1.19em;
	left: 0.06em;
	line-height: 1.19em;
	padding: 3px;
	position: absolute;
	top: 9.69em;
	width: 30.06em;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1">Titolo</div>
			<div align="center" class="div-1-2">[img]tabella.jpg[/img]</div>
			<div class="div-1-3">Desc.....</div>
			<div class="div-1-4">Descrizione dffddffssd sdd sssssss sssss
ssddddsss ssddd ssddds ffff ffffffffffd sdd</div>
			<div class="div-1-5">Prezzo</div>
			<div align="right" class="div-1-6">700</div>
			<div class="div-1-7">Quantità</div>
			<div align="right" class="div-1-8">1000</div>
			<div class="div-1-9"></div>
		</div>
	</body>
</html>

**bako** · 21-04-2009, 15:57

ma c'è un metodo migliore per farlo?
alla fine a me interessa che l'immagine sia a destra, il titolo sopra e il resto sia a destra dell'immagine ma allienato in cima.
se faccio una tabella me lo allinea al centro (parlando dell'altezza)

**Gufo** · 22-04-2009, 00:44

Originariamente inviato da bako
ma c'è un metodo migliore per farlo?
alla fine a me interessa che l'immagine sia a destra, il titolo sopra e il resto sia a destra dell'immagine ma allienato in cima.
se faccio una tabella me lo allinea al centro (parlando dell'altezza)

Ma tu cosa hai chiesto? Una tabella fatta con div e css uguale alla tua! E in base a questa richiesta io ti ho dato il codice.

**bako** · 22-04-2009, 18:06

ho fatto così:

codice:

   <table>
                    <tr>
                        <td>
                             dato
                        </td>
                        <td>
                           dato
                        </td>
                    </tr>
                    <tr>
                        <table>
                            <tr>
                                <td>
                                  immagine
                                </td>
                                <td>
                                    <table>
                                        <tr>
                                            <td>
                                                Description
                                            </td>
                                            <td>
                                                dato
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Price
                                            </td>
                                            <td>
                                                 dato
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Quantity aviable
                                            </td>

                                            <td>
                                               dato
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </tr>
                </table>

il fatto è che il testo è allienato al centro, lo vorrei allineato in alto.

codice:

td{
     vertical-align:text-top;
    padding-top:0px;
    border-left:5px;
}

non funziona

Discussione: Layout tabella per oggetti

Strumenti discussione

Ricerca discussione

Visualizza

Layout tabella per oggetti

Permessi di invio