guarda è vero che l'allineamento dovrebbe essere a sinistra in alto, ma come hai notato anche tu non è sempre così, quindi la cosa migliore è sempre quella di specificarlo esplicitamente, anche perché per centrare il layout nella pagina per colpa di Internet Explorer
bisogna specificare text-align: center e poi margin: 0 auto.
quindi il tuo layout può essere realizzato così:
Codice:
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
text-align: center;
paddin: 0;
margin: 0 auto;
}
td,th {
padding: 2px;
empty-cell: show; /* mostra le celle anche se vuote */
}
table {
width: 100%;
border: 1px solid #000;
border-spacing: 2px;
}
.sposta{margin-left: -20px;}
p, li {text-align: left;}
-->
</style>
Tieni presente che è sempre un bene definire alcune cose e non darle per scontate, per esempio il colore di sfondo, non è che tutti i browser usino il bianco in modo predefinito, io uso il verde mare perché una volta mi è capitato in una presentazione d un sito per un grosso cliente di aver dimenticato di settare il colore di sfondo e mi sono ritrovato il sito in rosso!
Da allora uso un colore di default assurdo proprio per ricordarmi di settare sempre colori di sfondo e di primo piano.
Ora la tua pagina diventa così:
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" dir="ltr" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Una serie di elementi in una tabella</title>
<style type="text/css" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
text-align: center;
paddin: 0;
margin: 0 auto;
}
td,th {
padding: 2px;
empty-cell: show; /* mostra le celle anche se vuote */
}
table {
width: 100%;
border: 1px solid #000;
border-spacing: 2px;
}
.sposta{margin-left: -20px;}
p, li {text-align: left;}
</style>
</head>
<body>
<table>
<tr>
<td>
<ul>
<li class="sposta">
Oggi sono andato a fare la spesa
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Oggi sono andato a fare la spesa
</li>
</ul>
</td>
</tr>
</table>
<ul>
<li>
Oggi sono andato a fare la spesa
</li>
</ul>
</body>
</html>
[code]
quello che alla fine non ho ben compreso è l'uso di tutte quelle liste puntate che contengono testo.