[Tuto] Tableaux html

Envie de rendre votre story encore plus belle ? Venez découvrir de nouveaux graphs pour votre récit ou demandez-en un.
Guru
Romancier

Romancier
Avatar du membre

Messages : 2334
Enregistré le : 23 juil. 2010, 15:48
Localisation : Paris

[Tuto] Tableaux html

Messagepar Guru » 04 janv. 2015, 17:17

Bonjour !

Plusieurs personnes m'ont demandé d'expliquer comment je procédais pour faire mes tableaux dans ma story, je vais donc vous faire un bref tutoriel de la marche à suivre :p

Outils nécessaires
-Notepad++ (trouvable un peu partout sur le net (lien))
-Connaissances basiques HTML
-Connaissances basiques CSS

La procédure de base est assez simple. Dans votre partie, une fois sur l'écran que vous voulez retranscrire (votre championnat, l'affichage "Compétitions", ou bien votre calendrier par exemple), il vous suffit de suivre les instructions suivantes :
Menu > Imprimer écran... > Site Internet
Vous n'avez alors qu'à nommer votre fichier et choisir l'emplacement de sauvegarde.
Une fois cela fait, ouvrez le fichier ainsi créé avec Notepad++ et vous avez la base de votre tableau.

Cependant, à ce niveau là, il s'agit simplement d'un tableau basique non stylisé (pas très visuellement agréable donc).
Pour afficher le rendu de votre document sur Notepad++ je vous conseil la manipulation Exécution > Launch in Chrome

Pour pouvoir personnaliser le visuel de votre tableau, il vous faudra utiliser le css dans la feuille de style du document.

Si vous avez des questions ou bien si vous voulez savoir comment faire tel ou tel chose, n'hésitez pas à demander ici, je vous donnerai les manips. à faire ;) (plus facile de faire du cas par cas :D)

PABLOCORREA
Grand Espoir

Grand Espoir

Messages : 235
Enregistré le : 15 oct. 2009, 15:53

Re: [Tuto] Tableaux html

Messagepar PABLOCORREA » 04 janv. 2015, 20:29

Loki a écrit :Pour pouvoir personnaliser le visuel de votre tableau, il vous faudra utiliser le css dans la feuille de style du document.
)


Tout d'abord merci Loki pour cette très bonne initiative.

Peux tu stp expliquer comment tu utilise une feuille de style css ?

Pourrais tu mettre a disposition ta feuille de style pour qu'on puisse réaliser des tests avec ?

Par avance merci :)

Guru
Romancier

Romancier
Avatar du membre

Messages : 2334
Enregistré le : 23 juil. 2010, 15:48
Localisation : Paris

Re: [Tuto] Tableaux html

Messagepar Guru » 04 janv. 2015, 20:33

PABLOCORREA a écrit :Tout d'abord merci Loki pour cette très bonne initiative.

Peux tu stp expliquer comment tu utilise une feuille de style css ?

Pourrais tu mettre a disposition ta feuille de style pour qu'on puisse réaliser des tests avec ?

Par avance merci :)


Je pense que pour ta première question, le meilleur moyen d'avoir une réponse claire est d'aller chercher des tutoriels sur la base du css.

Pour mes propres css, voici les deux que j'utilise :

Pour le classement

Code : Tout sélectionner

<style type ="text/css">
@font-face {
  font-family: "Gotham";
  font-style: normal;
  font-weight: 400;
  src: local("Gotham");
}

body,td,th {
   font-family: Gotham, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #787878;
}
th {
    padding-left: 2px;
   padding-right: 5px;
   text-align: left;
   font-size: 11px;
   font-weight: normal;
}
tr {
    height: 40px;}
td {
   padding: 2px;
   border-style: solid;
   border-width: 1px;
   border-right: none;
   border-left: none;
   border-bottom: none;
   border-top: 2px solid #ffffff;
   text-transform: uppercase;
   font-size: 13px;
}
table tr:nth-child(1){
height: 5px;}

table tr:nth-child(2) td {color:#ffffff !important;}

table td:nth-child(1), table td:nth-child(3), table td:nth-last-child(1){
   font-weight: bold;
}
table th:nth-child(1), table td:nth-child(1){
   width: 6%;
}
table th:nth-child(2), table td:nth-child(2){
   width: 4%;
}
table th:nth-child(n+4), table td:nth-child(n+4){
   width: 3%;
}
table th:nth-child(4),table td:nth-child(4), table th:nth-child(7),table td:nth-child(7), table th:nth-child(9),table td:nth-child(9){
   padding-right: 20px;
}
</style>


Et pour le calendrier

Code : Tout sélectionner

<style type ="text/css">
@font-face {
  font-family: "Gotham";
  font-style: normal;
  font-weight: 400;
  src: local("Gotham");
}

body,td,th {
   font-family: Gotham, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #787878;
}
th {
    padding-left: 2px;
   padding-right: 5px;
   text-align: left;
   font-size: 11px;
   font-weight: normal;
}
tr {
    height: 40px;}
td {
   padding: 2px;
   border-style: solid;
   border-width: 1px;
   border-right: none;
   border-left: none;
   border-bottom: none;
   border-top: 2px solid #ffffff;
   text-transform: uppercase;
   font-size: 13px;
}
table tr:nth-child(1){
height: 5px;}

table td:nth-child(1), table td:nth-child(3), table td:nth-child(6), table td:nth-last-child(1){
   font-weight: bold;
}
table th:nth-child(1), table td:nth-child(1){
   width: 125px;
}
table th:nth-child(2), table td:nth-child(2){
   width: 45px;
}
table th:nth-child(3), table td:nth-child(3){
   width: 205px;
}
table th:nth-child(4), table td:nth-child(4){
   width: 45px;
}
table th:nth-child(5), table td:nth-child(5){
   width: 32px;
}
table th:nth-child(6), table td:nth-child(6){
   width: 75px;
    padding-left: 17px;
}
table th:nth-child(7), table td:nth-child(7){
   width: 250px;
   text-transform: none;
   font-size: 11px;
}
table th:nth-child(8), table td:nth-child(8){
   width: 230px;
       text-transform: none;
   font-size: 12px;
}

table th:nth-child(7),table td:nth-child(7){
   padding-right: 20px;
}
</style>

Deco
V.I.P.

V.I.P.
Avatar du membre

Messages : 1739
Enregistré le : 14 oct. 2009, 23:02
Contact :

Re: [Tuto] Tableaux html

Messagepar Deco » 04 janv. 2015, 20:57

Le CSS du classement ressemble beaucoup au mien :sac:

normal tu lui a fait :lol: :lol: :lol:
Image

Guru
Romancier

Romancier
Avatar du membre

Messages : 2334
Enregistré le : 23 juil. 2010, 15:48
Localisation : Paris

Re: [Tuto] Tableaux html

Messagepar Guru » 04 janv. 2015, 21:00

Sans doute une coïncidence :o
Je suis sur que le mien est mieux par contre


Retourner vers « Story »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités