5568 sujets

Sémantique web et HTML

[Résolu] Une "conversion" de tableaux Word en HTML

Pages :
Bonjour.

J'ai plusieurs tableaux Word - nombre de lignes et de colonnes différent - que je désire "convertir" en HTML mais en structure tableless, via des DIV, SPAN et CSS. Existe t-il un outil pour faciliter la tâche car je ne me vois pas tout recopier tellement c'est galère.

Merci.
Pour ma part je ne vois pas...
A part sauvegarder ton fichier Word en document html et y aller à coups de Ctrl + f (ou Ctrl + h selon ton éditeur) pour modifier tes balises en masse et supprimer celles inutiles...

Sinon, peut-être qu'à partir du code HTML, ZenCoding est capable de remplacer ta structure par ce que tu veux... A voir, je ne l'ai jamais beaucoup utilisé...
Modifié par Gothor (04 Jun 2012 - 16:05)
J'ai essayé d'enregistrer en HTML sous Word, un désastre. Je dois nettoyer toutes les balises de toutes les saletés inutiles par des rechercher/remplacer (ça prend un temps fou) et ensuite remplacer les TR et TD par des DIV (si il n'y avait que ça, ça irait vite).
Ce qui fait pour le moment je me contente de copies d'écrans que j'insère sous forme d'images.
coder un programme dans un langage quelconque, pas forcément du web, qui traiterait le fichier word pour ecrire du html dans un autre fichier. Le plus simple selon moi, mais il va falloir quelques bases en programmation...
J'avais trouvé ceci sur Développez.com :

http://www.developpez.net/forums/d75826/logiciels/microsoft-office/word/vba-word/tableaux-word-vers-html

Mais les macros n'apparaissent pas dans ma liste (j'utilise encore Word 2000 et il y a sûrement un problème de compatibilité).

Mais là en faisant quelques recherches, je viens à l'instant de trouver ce convertisseur en ligne :

http://www.textfixer.com/html/convert-word-to-html.php

C'est nickel. Plus le tableau est "clean" (pas de bordures, largeurs de colonnes fixe, et...) plus il ressort un code très minimaliste est bien indenté. Il reste plus qu'à faire des rechercher/remplacer de TD par des DIV etc... Smiley smile
Modifié par Nerva (04 Jun 2012 - 16:21)
Modérateur
J'ai souvent fait ce genre de truc, avec des rechercher/remplacer, des expressions régulières, en profitant intelligemment des retours à la ligne et des tabulations pour insérer des balises.
Y a un PHP qui tourne derriere, donc un mec qui s'est bien amusé, mais effectivement, les tabulations et retour a la ligne sont assez utiles pour recréer un tableau.
Je profite de ce sujet pour un petit truc qui ne va pas dans mon "tableau" : je n'arrive pas à le centrer horizontalement.

.table {
	text-align: center;
}

.table-header {
	clear: both;
	margin: 5px;
	padding: 0;
	font-weight: bold;
}

.table-line {
	clear: both;
	margin: 5px;
	padding: 0;
}

.table-case { 
	float: left;
	margin: 5px;
	padding: 0;
	border: none;
	text-align: center;
	width: 5em;
}

<div class="table">
	<div class="table-header">
		<span class="table-case">LAT</span>
		<span class="table-case">HAT</span>
		<span class="table-case">DIT</span>
		<span class="table-case">CMM</span>
		<span class="table-case">CPO</span>
		<span class="table-case">NPX</span>
		<span class="table-case">REF</span>
	</div>
	<div class="table-line">
		<span class="table-case">100</span>
		<span class="table-case">150</span>
		<span class="table-case">180.28</span>
		<span class="table-case">0.052</span>
		<span class="table-case">0.002</span>
		<span class="table-case">1 970</span>
		<span class="table-case">500</span>
	</div>
	<div class="table-line">
		<span class="table-case">130</span>
		<span class="table-case">190 </span>
		<span class="table-case">230.22</span>
		<span class="table-case">0.067</span>
		<span class="table-case">0.0026</span>
		<span class="table-case">1 969</span>
		<span class="table-case">385</span>
	</div>
	<div class="table-line">
		<span class="table-case">150</span>
		<span class="table-case">225</span>
		<span class="table-case">270.42</span>
		<span class="table-case">0.079</span>
		<span class="table-case">0.0031</span>
		<span class="table-case">1 906</span>
		<span class="table-case">323</span>
	</div>
	<div class="table-line">
		<span class="table-case">200</span>
		<span class="table-case">300</span>
		<span class="table-case">360.56</span>
		<span class="table-case">0.105</span>
		<span class="table-case">0.0041</span>
		<span class="table-case">1 920</span>
		<span class="table-case">244</span>
	</div>
	<div class="table-line">
		<span class="table-case">300</span>
		<span class="table-case">450</span>
		<span class="table-case">540.83</span>
		<span class="table-case">0.157</span>
		<span class="table-case">0.0062</span>
		<span class="table-case">1 905</span>
		<span class="table-case">161</span>
	</div>
	<div class="table-line">
		<span class="table-case">450</span>
		<span class="table-case">600</span>
		<span class="table-case">750</span>
		<span class="table-case">0.218</span>
		<span class="table-case">0.0086</span>
		<span class="table-case">2 060</span>
		<span class="table-case">116</span>
	</div>
	<div class="table-line">
		<span class="table-case">500</span>
		<span class="table-case">750</span>
		<span class="table-case">901.39</span>
		<span class="table-case">0.262</span>
		<span class="table-case">0.0103</span>
		<span class="table-case">1 912</span>
		<span class="table-case">97</span>
	</div>
</div>

Modifié par Nerva (04 Jun 2012 - 17:27)
Hello,

C'est moi ou tu reproduis un tableau de données avec des DIV? Smiley sweatdrop
Dans le genre j'ai envie de m'embêter à faire des bêtises, ça se pose un peu là...

Quand on a des données tabulaires, bien évidemment on utilise TABLE.
A force de lire que les tableaux c'est périmé, qu'il faut les bannir du HTML, on finit par suivre les conseils... Smiley biggrin
Les tableaux ne sont pas périmés...
Ce sont les tableaux de mise en page qu'il ne faut pas utiliser...

Si tes données sont bien des données tabulaires, alors utilise un tableau...
Ok. Les données sont bien tabulaires mais je vais avoir besoin de deux présentations différentes. Comment paramétrer les styles de tableau de manière distincte ?
Je pense à un truc du genre :

table#aspect_A { valeurs }

table#aspect_B { valeurs }

Et pareil pour les colonnes et les cellules. C'est correct ?
Je pensais les intégrer en class et non en id. Je n'ai jamais mis en forme de tableaux.
Je suis parvenu à quelque chose en testant un peu.

table.table1 { /* Style 1 */ }
table.table2 { /* Style 2 */ }


<table class="table1"></table>
<table class="table1"></table>

Et même chose pour les TH, TR et TD.
Nerva a écrit :
Et même chose pour les TH, TR et TD.

Une fois que tu as une classe sur ton TABLE, tu peux utiliser des sélecteurs tels que:
.table1 td {}
.table2 td {}

.table1 .unStyleDeCellule {}
.table2 .unStyleDeCellule {}

/* etc. */

Ainsi tu évites de devoir modifier tes classes sur toutes tes lignes et cellules.
Effectivement, ne pas avoir à indiquer la classe dans chaque TH et TD est intéressant, surtout si par exemple on avait plusieurs styles de tableaux ; ça évite beaucoup de rechercher/remplacer préalables... Smiley cligne
Modifié par Nerva (05 Jun 2012 - 13:45)
Pages :
Sujet clos
Aller à