From 8627af33ba720e0f0df4f7b0f85a406d06d3fdfd Mon Sep 17 00:00:00 2001
From: "Christian P. MOMON" <christian.momon@devinsy.fr>
Date: Fri, 2 Oct 2020 01:36:34 +0200
Subject: [PATCH] Refactored HTML/CSS rendering.

---
 .../statoolinfos/cli/StatoolInfosCLI.java     |  1 +
 .../statoolinfos/htmlize/CategoriesPage.java  |  2 +-
 .../statoolinfos/htmlize/CategoryPage.java    |  2 +-
 .../statoolinfos/htmlize/Htmlizer.java        |  2 +
 .../statoolinfos/htmlize/categories.xhtml     | 54 ++++++-------
 .../statoolinfos/htmlize/category.xhtml       | 74 +++++++++---------
 .../statoolinfos/htmlize/organization.xhtml   | 76 +++++++++----------
 .../htmlize/propertiesFiles.xhtml             | 74 +++++++++---------
 .../statoolinfos/htmlize/service.xhtml        | 52 +++++++------
 .../statoolinfos/htmlize/services.xhtml       | 14 ++--
 .../statoolinfos/htmlize/software.xhtml       | 72 +++++++++---------
 .../statoolinfos/htmlize/softwares.xhtml      | 58 +++++++-------
 .../statoolinfos/htmlize/webCharterView.xhtml |  2 +
 13 files changed, 247 insertions(+), 236 deletions(-)

diff --git a/src/fr/devinsy/statoolinfos/cli/StatoolInfosCLI.java b/src/fr/devinsy/statoolinfos/cli/StatoolInfosCLI.java
index 6947574..dfca365 100644
--- a/src/fr/devinsy/statoolinfos/cli/StatoolInfosCLI.java
+++ b/src/fr/devinsy/statoolinfos/cli/StatoolInfosCLI.java
@@ -102,6 +102,7 @@ public final class StatoolInfosCLI
         message.appendln("    statoolinfos [ -h | -help | --help ]");
         message.appendln("    statoolinfos [ -v | -version | --version ]");
         message.appendln("    statoolinfos clear [ directory | file ]");
+        message.appendln("    statoolinfos build [ directory | file ]");
         message.appendln("    statoolinfos crawl [ directory | file ]");
         message.appendln("    statoolinfos htmlize [ directory | file ]");
 
diff --git a/src/fr/devinsy/statoolinfos/htmlize/CategoriesPage.java b/src/fr/devinsy/statoolinfos/htmlize/CategoriesPage.java
index 294f59d..7f6da06 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/CategoriesPage.java
+++ b/src/fr/devinsy/statoolinfos/htmlize/CategoriesPage.java
@@ -63,7 +63,7 @@ public class CategoriesPage
                 data.setAttribute("categoryListLine", index, "categoryListLineNameLink", "href", "category-" + stat.getCategory().getTechnicalName() + ".xhtml");
                 data.setAttribute("categoryListLine", index, "categoryListLineNameLink", "title", stat.getCategory().getDescription());
 
-                data.setEscapedContent("categoryListLine", index, "categoryListLineSoftwares", stat.getCategory().getSoftwares().toStringWithFrenchCommas());
+                data.setEscapedContent("categoryListLine", index, "categoryListLineSoftwares", stat.getCategory().getSoftwares().sort().toStringWithFrenchCommas());
                 data.setContent("categoryListLine", index, "categoryListLineOrganizationCount", stat.getOrganizationCount());
                 data.setContent("categoryListLine", index, "categoryListLineServiceCount", stat.getServiceCount());
                 data.setContent("categoryListLine", index, "categoryListLineUserCount", stat.getUserCount());
diff --git a/src/fr/devinsy/statoolinfos/htmlize/CategoryPage.java b/src/fr/devinsy/statoolinfos/htmlize/CategoryPage.java
index f9be5bd..16aec6e 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/CategoryPage.java
+++ b/src/fr/devinsy/statoolinfos/htmlize/CategoryPage.java
@@ -59,7 +59,7 @@ public class CategoryPage
 
             data.setContent("categoryName", category.getName());
             data.setContent("categoryDescription", category.getDescription());
-            data.setContent("categorySoftwares", category.getSoftwares().toStringWithFrenchCommas());
+            data.setContent("categorySoftwares", category.getSoftwares().sort().toStringWithFrenchCommas());
             data.setContent("serviceCount", services.size());
 
             int index = 0;
diff --git a/src/fr/devinsy/statoolinfos/htmlize/Htmlizer.java b/src/fr/devinsy/statoolinfos/htmlize/Htmlizer.java
index 9e3cc1d..b15c2a7 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/Htmlizer.java
+++ b/src/fr/devinsy/statoolinfos/htmlize/Htmlizer.java
@@ -112,6 +112,8 @@ public class Htmlizer
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/statoolinfos.css", targetDirectory);
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/Chart.bundle.min.js", targetDirectory);
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/sorttable.js", targetDirectory);
+            StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/datatables.min.css", targetDirectory);
+            StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/datatables.min.js", targetDirectory);
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/statoolinfos-logo.jpg", targetDirectory);
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/statoolinfos-logo.ico", targetDirectory);
             StatoolInfosUtils.copyRessource("/fr/devinsy/statoolinfos/htmlize/stuff/statoolinfos-logo-name.jpg", targetDirectory);
diff --git a/src/fr/devinsy/statoolinfos/htmlize/categories.xhtml b/src/fr/devinsy/statoolinfos/htmlize/categories.xhtml
index e6a452a..b257a6d 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/categories.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/categories.xhtml
@@ -11,34 +11,34 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Catégories</h2>
-		
-		<div>Nombre de catégories : <span id="categoryCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 900px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th class="" style="width: 200px;">Nom de la catégorie</th>
-						<th class="">Logiciels</th>
-						<th class="" style="width: 100px;">Services</th>
-						<th class="" style="width: 100px;">Organisations</th>
-						<th class="" style="width: 100px;">Utilisateurs mensuels</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="categoryListLine">
-						<td id="categoryListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="categoryListLineNameLink" title="">n/a</a>
-						</td>
-						<td id="categoryListLineSoftwares">n/a</td>
-						<td id="categoryListLineServiceCount" class="td_number">n/a</td>
-						<td id="categoryListLineOrganizationCount" class="td_number">n/a</td>
-						<td id="categoryListLineUserCount" class="td_number">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2>Catégories</h2>
+			
+			<div>Nombre de catégories : <span id="categoryCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left">
+			<thead>
+				<tr>
+					<th class="" style="width: 200px;">Nom de la catégorie</th>
+					<th class="">Logiciels</th>
+					<th class="" style="width: 100px;">Services</th>
+					<th class="" style="width: 100px;">Organisations</th>
+					<th class="" style="width: 100px;">Utilisateurs mensuels</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="categoryListLine">
+					<td id="categoryListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="categoryListLineNameLink" title="">n/a</a>
+					</td>
+					<td id="categoryListLineSoftwares">n/a</td>
+					<td id="categoryListLineServiceCount" class="td_number">n/a</td>
+					<td id="categoryListLineOrganizationCount" class="td_number">n/a</td>
+					<td id="categoryListLineUserCount" class="td_number">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/category.xhtml b/src/fr/devinsy/statoolinfos/htmlize/category.xhtml
index d5f0476..6d86247 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/category.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/category.xhtml
@@ -11,44 +11,44 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Catégorie <span id="categoryName">n/a</span></h2>
-		
-		<p id="categoryDescription">Bla bla description</p>
-		<div>Logiciels : <span id="categorySoftwares">Bla bla logiciels</span></div>
-		<div>Nombre de services : <span id="serviceCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 900px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th class="" style="width: 200px;">Nom du service</th>
-						<th class="" style="width: 200px;">Organisation</th>
-						<th class="" style="width: 200px;">URL</th>
-						<th class="" style="width: 200px;">Logiciel</th>
-						<th class="" style="width: 100px;">Utilisateurs mensuels</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="serviceListLine">
-						<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="serviceListLineNameLink">
-								<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="serviceListLineNameValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineOrganization" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="serviceListLineOrganizationLink">
-								<img id="serviceListLineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="serviceListLineOrganizationValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
-						<td id="serviceListLineSoftware">n/a</td>
-						<td id="serviceListLineUserCount" class="td_number">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2>Catégorie <span id="categoryName">n/a</span></h2>
+			
+			<p id="categoryDescription">Bla bla description</p>
+			<div>Logiciels : <span id="categorySoftwares">Bla bla logiciels</span></div>
+			<div>Nombre de services : <span id="serviceCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left">
+			<thead>
+				<tr>
+					<th class="" style="width: 200px;">Nom du service</th>
+					<th class="" style="width: 200px;">Organisation</th>
+					<th class="" style="width: 200px;">URL</th>
+					<th class="" style="width: 200px;">Logiciel</th>
+					<th class="" style="width: 100px;">Utilisateurs mensuels</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="serviceListLine">
+					<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="serviceListLineNameLink">
+							<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="serviceListLineNameValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineOrganization" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="serviceListLineOrganizationLink">
+							<img id="serviceListLineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="serviceListLineOrganizationValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
+					<td id="serviceListLineSoftware">n/a</td>
+					<td id="serviceListLineUserCount" class="td_number">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/organization.xhtml b/src/fr/devinsy/statoolinfos/htmlize/organization.xhtml
index 521965c..bd9031e 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/organization.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/organization.xhtml
@@ -11,45 +11,45 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2><img id="organizationLogo" src="#" style="width: 100px; heigth: 100px; vertical-align: middle;"/> <span id="organizationName">Organization name</span></h2>
-		
-		<div style="margin: 5px;">
-			<a id="organizationRawButton" href="#" class="button">Raw</a>
-		</div>
-		<p id="organizationDescription">Bla bla description</p>
-		<div>Nombre de services : <span id="serviceCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 900px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th class="" style="width: 200px;">Nom du service</th>
-						<th class="">URL</th>
-						<th class="">Logiciel</th>
-						<th class="" style="width: 100px;">Utilisateurs mensuels</th>
-						<th class="" style="width: 100px;">Date</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="serviceListLine">
-						<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="serviceListLineNameLink">
-								<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="serviceListLineNameValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
-						<td id="serviceListLineSoftware">
-							<a href="#" id="serviceListLineSoftwareLink">
-								<span id="serviceListLineSoftwareValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineUserCount" class="td_number">n/a</td>
-						<td id="serviceListLineDate" class="center">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2><img id="organizationLogo" src="#" style="width: 100px; heigth: 100px; vertical-align: middle;"/> <span id="organizationName">Organization name</span></h2>
+			
+			<div style="margin: 5px;">
+				<a id="organizationRawButton" href="#" class="button">Raw</a>
+			</div>
+			<p id="organizationDescription">Bla bla description</p>
+			<div>Nombre de services : <span id="serviceCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left" >
+			<thead>
+				<tr>
+					<th class="" style="width: 200px;">Nom du service</th>
+					<th class="">URL</th>
+					<th class="">Logiciel</th>
+					<th class="" style="width: 100px;">Utilisateurs mensuels</th>
+					<th class="" style="width: 100px;">Date</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="serviceListLine">
+					<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="serviceListLineNameLink">
+							<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="serviceListLineNameValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
+					<td id="serviceListLineSoftware">
+						<a href="#" id="serviceListLineSoftwareLink">
+							<span id="serviceListLineSoftwareValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineUserCount" class="td_number">n/a</td>
+					<td id="serviceListLineDate" class="center">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/propertiesFiles.xhtml b/src/fr/devinsy/statoolinfos/htmlize/propertiesFiles.xhtml
index 717c1fa..cad8422 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/propertiesFiles.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/propertiesFiles.xhtml
@@ -11,44 +11,44 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Fichiers properties</h2>
-		<div>Nombre de fichiers : <span id="fileCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 1000px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th style="width: 600px;">Nom local</th>
-						<th style="width: 300px;">Organisation</th>
-						<th style="width: 100px;">Lignes</th>
-						<th style="width: 100px;">Propriétés</th>
-						<th style="width: 100px;">Remplies</th>
-						<th style="width: 100px;">Vides</th>
-						<th style="width: 100px;">Erreurs</th>
-						<th style="width: 100px;">Date</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="fileListLine">
-						<td id="fileListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="fileListLineNameLink">n/a</a>
-						</td>
-						<td id="fileListLineOwner" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="fileListLineOwnerLink">
-								<img id="fileListLineOwnerLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="fileListLineNameValue">n/a</span>
-							</a>
-						</td>
-						<td id="fileListLineLineCount" class="td_number">n/a</td>
-						<td id="fileListLineActiveCount" class="td_number">n/a</td>
-						<td id="fileListLineFilledPropertyCount" class="td_number">n/a</td>
-						<td id="fileListLineBlankPropertyCount" class="td_number">n/a</td>
-						<td id="fileListLineErrorCount" class="td_number">n/a</td>
-						<td id="fileListLineDate" class="td_number">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2>Fichiers properties</h2>
+			<div>Nombre de fichiers : <span id="fileCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left">
+			<thead>
+				<tr>
+					<th style="width: 600px;">Nom local</th>
+					<th style="width: 300px;">Organisation</th>
+					<th style="width: 100px;">Lignes</th>
+					<th style="width: 100px;">Propriétés</th>
+					<th style="width: 100px;">Remplies</th>
+					<th style="width: 100px;">Vides</th>
+					<th style="width: 100px;">Erreurs</th>
+					<th style="width: 100px;">Date</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="fileListLine">
+					<td id="fileListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="fileListLineNameLink">n/a</a>
+					</td>
+					<td id="fileListLineOwner" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="fileListLineOwnerLink">
+							<img id="fileListLineOwnerLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="fileListLineNameValue">n/a</span>
+						</a>
+					</td>
+					<td id="fileListLineLineCount" class="td_number">n/a</td>
+					<td id="fileListLineActiveCount" class="td_number">n/a</td>
+					<td id="fileListLineFilledPropertyCount" class="td_number">n/a</td>
+					<td id="fileListLineBlankPropertyCount" class="td_number">n/a</td>
+					<td id="fileListLineErrorCount" class="td_number">n/a</td>
+					<td id="fileListLineDate" class="td_number">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/service.xhtml b/src/fr/devinsy/statoolinfos/htmlize/service.xhtml
index b6b6d5f..9ca4a12 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/service.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/service.xhtml
@@ -11,30 +11,36 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<h2><img id="serviceLogo" src="#" style="width: 100px; heigth: 100px;"/> <span id="serviceName">Service name</span></h2>
-	<div style="margin: 5px;">
-		<a id="serviceRawButton" href="#" class="button">Raw</a>
-	</div>
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2><img id="serviceLogo" src="#" style="width: 100px; heigth: 100px;"/> <span id="serviceName">Service name</span></h2>
+			<div style="margin: 5px;">
+				<a id="serviceRawButton" href="#" class="button">Raw</a>
+			</div>
 	
-	<p id="serviceDescription">Bla bla description</p>
-	<div>&#160;</div>
-	<div>
-		<table class="table_classic">
-		<tr>
-			<th class="">Nom du service</th>
-			<th class="">URL</th>
-			<th class="">Logiciel</th>
-			<th class="">Utilisateurs mensuels</th>
-			<th style="width: 10px;">Date</th>
-		</tr>
-		<tr id="serviceListLine">
-			<td id="serviceListLineName"><a href="#" id="serviceListLineNameLink">n/a</a></td>
-			<td id="serviceListLineUrl"><a href="#" id="serviceListLineUrlLink">n/a</a></td>
-			<td id="serviceListLineSoftware">n/a</td>
-			<td id="serviceListLineUserCount">n/a</td>
-			<td id="serviceListLineDate" class="center">n/a</td>
-		</tr>
-	</table>
+			<p id="serviceDescription">Bla bla description</p>
+		</div>
+		<div>&#160;</div>
+		<table class="table_classic left">
+			<thead>
+				<tr>
+					<th class="">Nom du service</th>
+					<th class="">URL</th>
+					<th class="">Logiciel</th>
+					<th class="">Utilisateurs mensuels</th>
+					<th style="width: 10px;">Date</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="serviceListLine">
+					<td id="serviceListLineName"><a href="#" id="serviceListLineNameLink">n/a</a></td>
+					<td id="serviceListLineUrl"><a href="#" id="serviceListLineUrlLink">n/a</a></td>
+					<td id="serviceListLineSoftware">n/a</td>
+					<td id="serviceListLineUserCount">n/a</td>
+					<td id="serviceListLineDate" class="center">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/services.xhtml b/src/fr/devinsy/statoolinfos/htmlize/services.xhtml
index 7fed88b..ee60bc7 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/services.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/services.xhtml
@@ -11,12 +11,13 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Tous les services</h2>
-		
-		<div>Nombre de services : <span id="serviceCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 1000px; margin-left: auto; margin-right: auto;">
+	<div class="center_table" style="width: 900px;">
+		<div class="center" >
+			<h2>Tous les services</h2>
+			
+			<div>Nombre de services : <span id="serviceCount">n/a</span></div>
+		</div>
+		<table class="table_classic sortable left">
 			<thead>
 				<tr>
 					<th class="" style="width: 200px;">Nom du service</th>
@@ -48,7 +49,6 @@
 				</tr>
 			</tbody>
 		</table>
-		</div>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/software.xhtml b/src/fr/devinsy/statoolinfos/htmlize/software.xhtml
index 9495a0c..dd41788 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/software.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/software.xhtml
@@ -11,43 +11,43 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Logiciel <span id="softwareName">n/a</span></h2>
-		
-		<p id="softwareDescription">Bla bla description</p>
-		<div>Nombre de services : <span id="serviceCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 900px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th class="" style="width: 200px;">Nom du service</th>
-						<th class="" style="width: 200px;">Organisation</th>
-						<th class="" style="width: 200px;">URL</th>
-						<th class="" style="width: 200px;">Logiciel</th>
-						<th class="" style="width: 100px;">Utilisateurs mensuels</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="serviceListLine">
-						<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="serviceListLineNameLink">
-								<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="serviceListLineNameValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineOrganization" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="serviceListLineOrganizationLink">
-								<img id="serviceListLineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
-								&#160;<span id="serviceListLineOrganizationValue">n/a</span>
-							</a>
-						</td>
-						<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
-						<td id="serviceListLineSoftware">n/a</td>
-						<td id="serviceListLineUserCount" class="td_number">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center">
+			<h2>Logiciel <span id="softwareName">n/a</span></h2>
+			
+			<p id="softwareDescription">Bla bla description</p>
+			<div>Nombre de services : <span id="serviceCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left">
+			<thead>
+				<tr>
+					<th class="" style="width: 200px;">Nom du service</th>
+					<th class="" style="width: 200px;">Organisation</th>
+					<th class="" style="width: 200px;">URL</th>
+					<th class="" style="width: 200px;">Logiciel</th>
+					<th class="" style="width: 100px;">Utilisateurs mensuels</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="serviceListLine">
+					<td id="serviceListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="serviceListLineNameLink">
+							<img id="serviceListLineLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="serviceListLineNameValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineOrganization" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="serviceListLineOrganizationLink">
+							<img id="serviceListLineOrganizationLogo" src="" style="width: 26px; height: 26px; padding-top:0; padding-bottom: 0; vertical-align: middle;"/>
+							&#160;<span id="serviceListLineOrganizationValue">n/a</span>
+						</a>
+					</td>
+					<td id="serviceListLineWebsite"><a href="#" id="serviceListLineWebsiteLink">n/a</a></td>
+					<td id="serviceListLineSoftware">n/a</td>
+					<td id="serviceListLineUserCount" class="td_number">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/softwares.xhtml b/src/fr/devinsy/statoolinfos/htmlize/softwares.xhtml
index d86b13f..cb13b8c 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/softwares.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/softwares.xhtml
@@ -11,36 +11,36 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-	<div class="center">
-		<h2>Logiciels</h2>
-		
-		<div>Nombre de logiciels : <span id="softwareCount">n/a</span></div>
-		<div class="left">
-			<table class="table_classic center_table sortable" style="width: 900px; margin-left: auto; margin-right: auto;">
-				<thead>
-					<tr>
-						<th class="">Nom</th>
-						<th class="">Catégorie</th>
-						<th class="" style="width: 100px;">Services</th>
-						<th class="" style="width: 100px;">Organisations</th>
-						<th class="" style="width: 100px;">Utilisateurs mensuels</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr id="softwareListLine">
-						<td id="softwareListLineName" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="softwareListLineNameLink" title="">n/a</a>
-						</td>
-						<td id="softwareListLineCategory" style="padding-top: 0; padding-bottom: 0;">
-							<a href="#" id="softwareListLineCategoryLink" title="">n/a</a>
-						</td>
-						<td id="softwareListLineServiceCount" class="td_number">n/a</td>
-						<td id="softwareListLineOrganizationCount" class="td_number">n/a</td>
-						<td id="softwareListLineUserCount" class="td_number">n/a</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="center_table" style="width: 900px;">
+		<div class="center">
+			<h2>Logiciels</h2>
+			
+			<div>Nombre de logiciels : <span id="softwareCount">n/a</span></div>
 		</div>
+		<table class="table_classic sortable left">
+			<thead>
+				<tr>
+					<th class="">Nom</th>
+					<th class="">Catégorie</th>
+					<th class="" style="width: 100px;">Services</th>
+					<th class="" style="width: 100px;">Organisations</th>
+					<th class="" style="width: 100px;">Utilisateurs mensuels</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr id="softwareListLine">
+					<td id="softwareListLineName" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="softwareListLineNameLink" title="">n/a</a>
+					</td>
+					<td id="softwareListLineCategory" style="padding-top: 0; padding-bottom: 0;">
+						<a href="#" id="softwareListLineCategoryLink" title="">n/a</a>
+					</td>
+					<td id="softwareListLineServiceCount" class="td_number">n/a</td>
+					<td id="softwareListLineOrganizationCount" class="td_number">n/a</td>
+					<td id="softwareListLineUserCount" class="td_number">n/a</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
 </html>
diff --git a/src/fr/devinsy/statoolinfos/htmlize/webCharterView.xhtml b/src/fr/devinsy/statoolinfos/htmlize/webCharterView.xhtml
index 1e463f3..e5097ec 100644
--- a/src/fr/devinsy/statoolinfos/htmlize/webCharterView.xhtml
+++ b/src/fr/devinsy/statoolinfos/htmlize/webCharterView.xhtml
@@ -9,6 +9,8 @@
 	<link rel="stylesheet" type="text/css" href="statoolinfos.css" />
 	<script src="sorttable.js" />
 	<script src="Chart.bundle.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="datatables.min.css"/>
+ 	<script type="text/javascript" src="datatables.min.js"></script>
 </head>
 <body>
 	<div style="margin: 5px 10px 10px 10px;">