Se débarasser des tableaux

Bonjour à tous
J'aimerais me débarasser des tableaux (pour la mise en page, pas pour des données tabulaires ), mais en fait j'ai un peu de mal à piger la méthode (j'ai déjà consulté quelques tutos, mais y'a peut-être pas que les tutos que je devrais consulter ), et j'aimerais bien voir concrètement comment on passe d'un tableau HTML à une structure plus appropriée, à partir d'une portion de code en guise d'exemple.

Voici un tableau basique :

< table width=830 border=0 cellpadding=0 cellspacing=0 align=center>
< tr>
< td class="header_01">< /td>
< td rowspan=3>< div id="header_02">< /div>< /td>
< td rowspan=3>< div id="header_03">< /div>< /td>
< td rowspan=2 background="images/orange/header_04.jpg" WIDTH=179 HEIGHT=29 ALT="">< form>...< /form>< /td>
< td>< img alt="" src="images/spacer.gif" width="1" height="18">< /td>
< /tr>
< tr>
< td rowspan=2>< div id="header_05">< /div>< /td>
< td>< img alt="" src="images/spacer.gif" width="1" height="11">< /td>
< /tr>
< tr>
< td>< div id="header_06">< /div>< /td>
< td>< img alt="" src="images/spacer.gif" width="1" height="98">< /td>
< /tr>
< tr>
< td colspan=4 class="footer2" align="center">< center>Texte...< /center>< /td>
< td>< img alt="" src="images/spacer.gif" width="1" height="19">< /td>
< /tr>
< /table>

Et la partie du fichier CSS qui lui correspond :

TD.header_01 {
background-image: url(images/orange/header_01.jpg);
background-repeat: no-repeat;
width: 640px;
height: 18px;
}

div#header_02 {
background-image: url(images/orange/header_02.jpg);
background-repeat: no-repeat;
width: 10px;
height: 127px;

}

div#header_03 {
background-image: url(images/orange/header_03.jpg);
background-repeat: no-repeat;
width: 1px;
height: 127px;
}

TD.header_04 {
background-image: url(images/orange/header_04.jpg);
background-repeat: no-repeat;
width: 179px;
height: 29px;
}

div#header_05 {
background-image: url(images/orange/header_05.jpg);
background-repeat: no-repeat;
width: 640px;
height: 109px;
}

div#header_06 {
background-image: url(images/orange/header_06.jpg);
background-repeat: no-repeat;
width: 179px;
height: 98px;
}

Si quelqu'un pouvait m'expliquer gentiment, ce serait sympa.

Salut,

En fait, j'estime que ton code n'a pas vraiment d'importance pour répondre à cette question :
1) tu regardes ta page dans ton navigateur
2) grâce à ça (et au fait que tu connais déjà cette page), tu détermines quels sont les différents éléments de la page, et leur rôle dans la page : un menu vertical à gauche, un titre principal en haut, une photo incluse dans ce texte, mais flottant à droite (ex. : l'auteur du texte)
3) tu détermines la façon la plus sémantiquement juste selon toi d'exprimer les différents éléments : le menu est une liste de liens, le titre principal un titre de niveau 1 ...
4) tu codes ça en xhtml : ul, li, h1, div, p et autres joyeusetés du même ordre
5) tu crées le css qui va avec, du plus global au plus spécifique (je trouve ça plus simple mais ça n'engage que moi)
6) tu regardes ta jolie page toute nickel et tu te dis que, quand même, t'es vachement fort

Ah ok, il n'y a donc pas de schéma précis à suivre.
Dommage, ça aurait pourtant été plus simple.