Cercando di fare una tabella personalizzata

Sto cercando di fare una tabella che assomiglia a questo:Cercando di fare una tabella personalizzata

Ma io non sono del tutto sicuro di come fare per farlo.

Il risultato finale dovrebbe assomigliare a questo:

Stavo pensando di dover fare un div, e quindi impostando lo sfondo del div essere la parte grigia strutturata, e quindi la creazione di una tabella all'interno di quel div per organizzare il contenuto. Sta usando una tabella in questa situazione corretta? O c'è un metodo migliore? Grazie in anticipo.

fonte

2013-06-13 Bucthree

Il metodo migliore sarebbe utilizzare solo div per ciascuna sezione. Sto lavorando a un jsFiddle per mostrarti il concetto. –

e poi li si sposta a destra e a sinistra all'interno del contenitore div? – Bucthree

Si potrebbe voler esaminare i componenti dello scaffold di bootstrap, oppure è possibile impostare una larghezza fissa per il div di ogni riga. Ma comunque, perché non usi il tavolo? – choz

Attaccare a un markup non tabella. Oggi le best practice suggeriscono di utilizzare solo tabelle per dati tabulari e questo contenuto non è dati tabellare.

Esistono diversi metodi che è possibile utilizzare per eseguire questa operazione, tra cui l'utilizzo di float, la visualizzazione di blocchi in linea e altri. Ci sono anche considerazioni sul contenuto che avvolge le immagini (se il contenuto è lungo, ad esempio).

Ma ecco alcuni esempi di codice per ottenere il vostro rolling.

Stili:

div.left, 
div.right { 
    width: 400px; 
    overflow: hidden; /* forces the div to clear the floated content */ 
} 

div.left img, 
div.right img { 
    border: 2px solid #888; 
} 

div.left img { 
    float: left; 
    padding-right: 20px; 
} 

div.right img { 
    float: right; 
    padding-left: 20px; 
}

il markup HTML:

<div class="left"> 
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p> 
</div> 
<div class="right"> 
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p> 
</div>

fonte

2013-06-13 19:20:05

Fantastico! Grazie mille, questo ha funzionato! – Bucthree

Bello meno markup .. = meno byte .. – choz

Ecco un DEMO

Questo dovrebbe mostrare esattamente quello che ti serve.

<body> 
    <div id="topLeft"></div> 
    <div id="topRight"></div> 
    <div id="middleLeft"></div> 
    <div id="middleRight"></div> 
    <div id="bottomLeft"></div> 
    <div id="bottomRight"right></div> 
</body> 

body { 
    height:400px; 
} 
#topLeft { 
    background-color:#000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#topRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
} 
#middleLeft { 
    background-color:#000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#middleRight { 
    float:right; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomLeft { 
    float:left; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
}

Il corpo può essere sostituito con un involucro e opportunamente dimensionato.

Code on jsFiddle

fonte

2013-06-13 19:24:12

Fooey su quegli odiatori che dicono di non usare le tabelle. Vorrei assolutamente usare un tavolo per questo.

<table> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
    <tr> 
    <td colspan=2>Lorem Ipsum...</td> 
    <td colspan=1><img src="yadayada"></td> 
    </tr> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
</table>

fonte

2013-06-13 19:34:28

Questo non sempre funziona: i browser possono essere confusi sul calcolo delle larghezze delle colonne se dette colonne non appaiono mai unite. È decisamente preferibile utilizzare una delle opzioni fluttuanti per ciò che l'OP vuole. – Martha

Non odiare, sono solo sulla strada di utilizzare le tabelle per il layout e pagato il prezzo. Questo esempio ha più markup e è meno regolabile di un layout non di tabella. Con la soluzione non-table, un colpo rapido del css può apportare modifiche che non sono possibili con una soluzione da tavolo. –

Cercando di fare una tabella personalizzata

risposta

Problemi correlati