Creare tabelle dati a più colonne in css come?

[Alejandro]

Salve proseguendo nella mia ristrutturazione del sito vi pongo questo nuovo quesito.
Dovrei creare delle tabelle di questo tipo:


Non riesco a trovare tutorials (forse anche perchè non so che keywords cercare) per crearle in css. Al momento sono riuscito a creare tabelle dati con immagine e testo al lato tramite il float. Non so come creare questo tipo di colonne ad esempio.

[Mich_]

Quella e` una tabella.
La crei con i tag:
<table>
<caption>
<thead>, <tbody>, <tfoot>
<tr>, <th>, <td>

Poi per la formattazione: sono tutto oggetti di tipo blocco, per cui ti servono tutti gli attributi per i tag di tipo blocco; in piu` ci sono gli attributi per le tabelle (piu` precisamente per gli oggetti di tipo table, table-row, table-cell ecc.)

[Alejandro]

quindi per forza di cose devo usare table, tr ecc?
Non è possibile tables?

Che keywords dovrei cercare per trovare dei tutorials?

[Mich_]

E` sempre il solito problema di usare i tag per il loro significato semantico.
Le tabelle sono fatte per inserire dati tabellari (cioe` con relazione di riga e di colonna), mentre tutti gli altri usi sono errati.
Una volta si usavano le tabelle per sistemare illayout della pagina, e questo e` un uso non-semantico.
Quando si dice pagina (o sito) tableless, si intende che non si usano tabelle per formattare.

L'uso delle tabelle e dei CSS associati, li trovi nei tutorial di (X)HTML e CSS alla voce tabelle.
Tutti i tag postati sopra li puoi anche usare per cercare info.

[Alejandro]

Benissimo, allora leggendo un pò di tutorials grazie al tuo suggerimento ho creato questo codice.

HTML:

<div class="blockb" style="width:300px;">
	<div class="top"><h2><?=$NLS['TOP_USERS']?></h2></div>
	<TABLE class="holder">
	<THEAD>
	<TR> <TH>User</TH> <TH>Rev</TH> <TH>News</TH> <TH>Posts</TH> </TR>
</THEAD>
			<?
				$counter = 0;
				foreach($usersList as $user) {
			?>
			<TBODY>
			<TR> <TD><?=$user['USERNAME']?></TD> <TD><?=$user['REVIEWS']?></TD> <TD><?=$user['NEWS']?></TD>  <TD><?=$user['POSTS']?></TD>  </TR>

			<?
					$counter++;
					if($counter==10) break;		
				}
			?>
		</TBODY>
</TABLE>

	</div>
</div>

e questo css:

/*--start blockb--*/
.blockb{
	overflow:hidden;
	margin: 0 0 10px 0;
	clear:both;
}

.top {
  display: block;
  height: 100%;
  background: transparent url(../img/bar_top_right.png) no-repeat top right; 
  margin: 0 auto;
  padding-right:12px;
  height: 22px;
}

h2 {
  background: transparent url(../img/bar_tot.png) no-repeat top left;    
  font-size:10pt;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 22px;
  color: white;
  letter-spacing:-1px;
  text-align: right;
  text-transform: uppercase;
  margin: 0 auto;
}

.blockb .holder strong a, .block .holder h3 {
	text-decoration: none;
	color:#1d60b6;
	padding-right:10px;
	font-size:8pt;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 auto;
}
/*--end blockb--*/

Sto procedendo con la logica di prima. All'inizio abbiamo creato un blocco css ed ora creo un blocco css con lo stile tabelle. Alla fine in tutto il sito per ora ho solo questi due tipi di blocchi, quindi avrei un css molto snello.

Ora cosa non va, guarda pure nel server di prova sotto. Come vedi innanzitutto il blocco è di nuovo fuori dal float. O almeno sembra visto che il container si riferma prima. E poi non è largo quanto tutto. Forse ora dovrei dare dei comandi css ai tag nuovi?

[Alejandro]

Ho fatto un passo avanti ma devo limare ancora qualcosa

HTML

<TABLE class="holder">

	<THEAD>
	<TR> <TH>User</TH> <TH>Rev</TH> <TH>News</TH> <TH>Posts</TH> </TR>
</THEAD>
		
			<?
				$counter = 0;
				foreach($usersList as $user) {
			?>
			<TBODY>
			<TR><TH><?=$user['USERNAME']?></TH> <TD><?=$user['REVIEWS']?></TD> <TD><?=$user['NEWS']?></TD>  <TD><?=$user['POSTS']?></TD> </TR>

			<?
					$counter++;
					if($counter==10) break;		
				}
			?>
		</TBODY>
</TABLE>

CSS:

/*--central block--*/
.holder{
	clear:both;
	background:#fff;
	overflow:hidden;
	padding:1px 0 10px;
	border-left: 1px solid #B5B6B7;
	border-right: 1px solid #B5B6B7;
	border-bottom: 1px solid #B5B6B7;
	margin:0 auto;
	width:100%;
}
/*--titles--*/
.holder th{
	text-decoration: none;
	color:#1d60b6;
	padding-right:10px;
	font-size:8pt;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 auto;
	text-align:left;
}

/*--content--*/
.holder tbody th{
	text-decoration: none;
	color:#000;
	padding-right:10px;
	font-size:8pt;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 auto;
	text-align:left;
}

.holder tbody td {
	color:#000;
	margin:0 auto;
	overflow:hidden;
	font: 8pt Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

Come dici che sono messo? Vorrei poter mettere un bordo su tutte le celle all'interno del tbody ma non ci sono riuscito. se applico il bordo al tag TD mi lascia spazio tra una cella e l'altra.

[Mich_]

Ci sono vari errori.

Anzitutto i tag vanno scritti tutti in minuscolo (qualche browser potrebbe non capire tag maiuscoli).

Poi mi pare che usare i <th> per il nome sia errato: non si tratta del titolo della riga, ma fa parte della riga stessa. Invece se vuoi formattare le colonne in modo diverso, puoi usare i tag <col> e <colgroup> da inserire tra il <table> e il <thead>; in alternativa (dato che non tutti i browser capiscono il <col>) usa delle classi nei <td>.

Poi come l'altra volta hai postato il codice PHP, che non dice nulla a chi potrebbe aiutarti. Eventualmente posta una sola riga, ma con il contenuto reale (testuale o di immagini)

Tieni presente che un
margin:0 auto;
assegnato ad un <td> non credo serva. Servirebbe per centrare l'oggetto nel suo contenitore, ma un <td> non va centrato, deve stare al suo posto allineato in verticale.
I margini automatici puoi assegnarli alla tabella globale, se la vuoi centrata.
Invece puo` aver senso centare il contenuto dei <td> con il text-align:center;


if($counter==10) break;
Questo sa tanto di programmazione Basic.
Nella programmazione moderna si usano i loop con for o foreach, oppure while, ma un tast valido potrebe essere:
if($counter>=10) break;

[Alejandro]

Si stavo guardando proprio i tag col. Però se mi dici che non vanno su tutti i browser.

Pensavo a come fare una tabella di questo tipo:


pensavo ad una cosa tipo:

<table class="holder">

	<thead>
	<tr> <th>User</th> <th>Rev</th> <th>News</th> <th>Posts</th> </tr>
</thead>
	<tbody>
	<tr><td>admin</td> <td>voto 1</td> <td>voto 2</td>  <td>voto 3</td> </tr>
	</tbody>
</table>

ma come formattare i td per dargli quello sfondo? Poi ho il problema con i bordi all'interno della tabella.

Io metterei un css di questo tipo:

.blockb .holder{
	clear:both;
	background:#fff;
	overflow:hidden;
	padding:1px 10px 0 10px;
	border-left: 1px solid #B5B6B7;
	border-right: 1px solid #B5B6B7;
	border-bottom: 1px solid #B5B6B7;
	margin:0 auto;
	width:100%;
}
/*--titles--*/
.blockb .holder th{
	text-decoration: none;
	color:#1d60b6;
	padding-right:10px;
	font-size:8pt;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 auto;
	text-align:left;
}

/*--content--*/
.blockb .holder tbody td {
	color:#000;
	overflow:hidden;
	font: 8pt Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

non formattando il nome come th come posso dargli ad esempio uno sfondo diverso? I tag td non possono avere classi? tipo col1, col2, col3, ecc? così assegno ad ognuno il proprio stile.

[Mich_]

in alternativa (dato che non tutti i browser capiscono il <col> ) usa delle classi nei <td>.

L'avevo gia` scritto di usare le classi. Riprendendo il tuo esempio:

HTML:
<tr>
  <td class="nome">admin</td>
  <td class="rev">voto 1</td>
  <td class="news">voto 2</td>
  <td class="post">voto 3</td>
</tr>

CSS:
.holder td {
  ... qui la formattazione comune a tutti i td
  background: #bbb;    /* grigio chiaro */
}
.holder td.nome {         /* questo e` piu` specifico di quello di prima e posizionato dopo */
  background: #fff;        /* bianco */
}

[Gufo]

Vedi se così ti può andare bene!

<!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;
	text-align: left;
	width: 979px;
}

.div-1-1 {
	background-color: #000000;
	border: 1px inset #e0dfe3;
	clear: both;
	float: left;
	line-height: 19px;
	padding: 10px;
	text-align: center;
	width: 468px;
}

.div-1-2 {
	background-color: #000000;
	border: 1px inset #e0dfe3;
	float: left;
	line-height: 19px;
	padding: 10px;
	text-align: center;
	width: 144px;
}

.div-1-4 {
	background-color: #000000;
	border: 1px inset #e0dfe3;
	float: left;
	line-height: 19px;
	padding: 10px;
	text-align: center;
	width: 135px;
}

.div-1-5 {
	border: 1px inset #e0dfe3;
	clear: both;
	float: left;
	line-height: 19px;
	padding: 10px;
	width: 468px;
}

.div-1-6 {
	background-color: #999999;
	border: 1px inset #e0dfe3;
	float: left;
	line-height: 19px;
	padding: 10px;
	width: 144px;
}

.div-1-8 {
	background-color: #999999;
	border: 1px inset #e0dfe3;
	float: left;
	line-height: 19px;
	padding: 10px;
	width: 135px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-2"></div>
			<div class="div-1-2"></div>
			<div class="div-1-4"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-6"></div>
			<div class="div-1-8"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-6"></div>
			<div class="div-1-8"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-6"></div>
			<div class="div-1-8"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-6"></div>
			<div class="div-1-8"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-6"></div>
			<div class="div-1-8"></div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>