Tableau en HTML
Résolu/FerméUtilisateur anonyme - 2 août 2022 à 22:45
- Tableau en HTML
- Tableau croisé dynamique - Guide
- Tableau ascii - Guide
- Tableau word - Guide
- Editeur html - Télécharger - HTML
- Identifier un tableau à partir d'une photo - Forum Graphisme
10 réponses
Modifié le 18 juil. 2022 à 11:23
Bonjour,
Dans le corps d'un tableau, une ligne c'est <tr> </tr>(r pour row:ligne) <td> est un composant d'une ligne, une cellule. Donc déjà remplace <td> par <tr>. Et pour avoir plusieurs colonnes
<tr><td>01 samedi</td><td>01 lundi</td><td>01 jeudi</td> ... </tr>
18 juil. 2022 à 12:41
Merci,
J'avais trouvé ce code, je pensais qu'il y aurait pu avoir plus simple.
18 juil. 2022 à 22:39
bonsoir,
quelque chose comme ceci :
<html> <head> <title>Les tableaux </title> </head> <body> <table name="Janvier" ><font size="7" > <tr > <td></td><td><font size="24">Janvier</td> <tr bgcolor="grey" > <td>Lundi </td><td></td><td>3</td><td>10</td><td>17</td><td>24</td><td>31</td></tr> <td>Mardi </td><td></td><td>4</td><td>11</td><td>18</td><td>25</td></tr> <tr bgcolor="grey"> <td>Mercredi</td><td></td><td>5</td><td>12</td><td>19</td><td>26</td></tr> <td>Jeudi </td><td></td><td>6</td><td>13</td><td>20</td><td>27</td></tr> <tr bgcolor="grey"> <td>Vendredi</td><td></td><td>7</td><td>14</td><td>21</td><td>28</td></tr> <tr bgcolor="bleue"><td>Samedi </td><td>1</td><td>8</td><td>15</td><td>22</td><td>29</td></tr> <tr bgcolor="orange"> <td>Dimanche</td><td>2</td><td>9</td><td>16</td><td>23</td><td>30</td></tr> </body> </html>
ce qui donne ceci en visuel :
19 juil. 2022 à 17:52
Merci,
Ce que je veux est la chose suivante :
*
Les jours de janvier, je les ai rempli manuellement, ils seront remplis grâce à une fonction PHP.
Voici mon code :
<div class="container secteur" id="sect01"> <table class="table border-info" cellspacing="0"> <thead class="head"> <th>Janvier</th> <th>Février</th> <th>Mars</th> <th>Avril</th> <th>Mai</th> <th>Juin</th> </thead> <tbody class="tbody"> <tr><td>Samedi 01</td></tr><tr> <tr><td>Dimanche 02</td></tr> <tr><td>Lundi 03</td></tr> <tr><td>Mardi 04</td></tr> <tr><td>Mercredi 05</td></tr> <tr><td>Jeudi 06</td></tr> <tr><td>Vendredi 07</td></tr> <tr><td>Samedi 08</td></tr> <tr><td>Dimanche 09</td></tr> <tr><td>Lundi 10</td></tr> <tr><td>Mardi 11</td></tr> <tr><td>Mercredi 12</td></tr> <tr><td>Jeudi 13</td></tr> <tr><td>Vendredi 14</td></tr> <tr><td>Samedi 15</td></tr> <tr><td>Dimanche 16</td></tr> <tr><td>Lundi 17</td></tr> <tr><td>Mardi 18</td></tr> <tr><td>Mercredi 19</td></tr> <tr><td>Jeudi 20</td></tr> <tr><td>Vendredi 21</td></tr> <tr><td>Samedi 22</td></tr> <tr><td>Dimanche 23</td></tr> <tr><td>Lundi 24</td></tr> <tr><td>Mardi 25</td></tr> <tr><td>Mercredi 26</td></tr> <tr><td>Jeudi 27</td></tr> <tr><td>Vendredi 28</td></tr> <tr><td>Samedi 29</td></tr> <tr><td>Dimanche 30</td></tr> <tr><td>Lundi 31</td></tr> </tbody> </table>
Comment dois-je faire pour remplir Février, Mars, etc... ?
Merci par avance
Très cordialement
19 juil. 2022 à 18:01
<tbody class="tbody"> <tr><td>Samedi 01</td><td>Mardi 01</td><td>Mardi 01</td> .... </tr> <tr><td>Dimanche 02</td><td>Mercredi 02</td><td>Mercredi 02</td> .... </tr>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question19 juil. 2022 à 19:08
Merci,
Mais ça ne me dit pas comment, entrer les jours sous Février, Mars, etc..
Cordialement
Modifié le 19 juil. 2022 à 20:42
Bonjour,
Si si .. Jee Pee t'a donné la réponse ...
Un tableau en HTML ça se rempli LIgne par Ligne
Les balises TR servent à changer de ligne
Les balises TD servent à remplir les différentes cellules de tes lignes..
Mais bon.. comme tu dis vouloir le générer en php.. regarde ceci
<?php error_reporting(E_ALL); $year = 2022; $moisFr = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] ; // etc... ?> <table> <thead> <tr> <?php //boucle sur les mois pour afficher les en-têtes foreach($moisFr as $M){ echo "<th>".$M."</th>"; } ?> </tr> </thead> <tbody> <?php //maintenant on rempli, ligne par ligne, les dates des différents mois for($day=1;$day<=31;$day++){ echo "<tr>"; for($month=1;$month<=12;$month++){ $date = new DateTime($year . '-' . $month . '-' . $day ); $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::FULL, IntlDateFormatter::NONE); $formatter->setPattern('EEEE d '); echo "<td>"; if(checkdate($month, $day, $year)){ echo $formatter->format($date); // dimanche 17 juillet 2022 }else{ echo " - "; } echo "</td>"; } echo "</tr>"; } ?> </tbody> </table>
19 juil. 2022 à 23:13
bonsoir,
j'ai peut être trouver ce que vous cherchiez sur ce site
Tutoriel PHP : Créer un calendrier - Bing video
dans tous les cas il vous faudra passer par le php , javascript et css .
21 juil. 2022 à 19:24
Merci à tous,
J'ai trouvé ce que je cherchais, je ne suis pas passé par une table.
Comment puis-je mettre à disposition tout ce que j'ai fait ?
Sources HTML, PHP, CSS, JS.
Cordialement
23 juil. 2022 à 14:21
Bonjour Jordane,
Merci, mais j'ai fait autrement, je te mets mes sources.
1 - HTML
<?php require_once __DIR__ . '/vendor/autoload.php'; $month = new App\Date\Month($_GET['month'] ?? null, $_GET['year'] ?? null); $year = date('Y'); ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendrier</title> <!-- Style CSS --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <!-- Scripts externes --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer></script> <!-- Scripts internes --> <script src="" defer></script> <script src="" defer></script> </head> <body> <header class="header"> <div class="container-fluid"> <div class="row"> <div class="col-2"> <div class="date text-primary" id="date"></div> </div> <div class="col-8"> <h1 class="text-center text-info"><a href="/">Calendrier <?= $year ?></a></h1> </div> <div class="col-2"> <div class="time text-right text-primary" id="time"></div> </div> </div> </div> </header> <div class="container-fluid"> <div class="navigation"> <nav class="navbar navbar-light"> <form> <button class="btn btn-success me-2" type="button" id="prem">Premier trimestre</button> <button class="btn btn-success me-2" type="button" id="second">Deuxième trimestre</button> <button class="btn btn-success me-2" type="button" id="ferie">Jours fériés</button> </form> </nav> </div> </div> <section class="section" id="sect01"> <div class="container"> <div class="row section-top"> <?= $month->getPremierSemestre($year) ?> </div> </div> </section> <section class="section" id="sect02"> <div class="container"> <div class="row section-top"> <?= $month->getSecondSemestre($year) ?> </div> </div> </section> <section class="section" id="sect03"> <div class="container"> <h3>Jours fériés</h3> </div> </section> </body> </html>
2 - Classe PHP
<?php namespace App\Date; use \DateTime; use \DateInterval; class Month { // Tableaux des jours et des mois et des jours fériés public $days = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']; public $months = [' ', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']; public $feries; // Année, mois, jour public $year; public $month; public $today; // Variables private $daysInMonths; public $source; /** * Constructeur * @param int|null $month * @param int|null $year */ public function __construct (?int $month = null, ?int $year = null) { if ($month === null || $month < 1 || $month > 12) { $month = intval(date('m')); } if ($year === null) { $year = intval(date('Y')); } // Date du jour $toDay = date('Y-m-d'); $this->year = $year; $this->month = $month; $this->toDay = $toDay; // Tableau des jours fériés $this->feries = $this->getFeries($year); } /** * [getPremierSemestre description] * @param integer $year * @return string */ public function getPremierSemestre($year): string { $date = new DateTime($year . '-01-01'); // Boucle sur le premier trimestre for ($month=1; $month <= 6 ; $month++) { $this->daysInMonths = $date->format('t'); $this->source .= '<div class="col-2">'; $this->source .= '<div class="mois text-center bg-info">' . $this->months[$date->format('n')] . '</div>'; $this->source .= '<div class="days border-info bg-light">'; for ($day=1; $day <= $this->daysInMonths; $day++) { $this->source .= in_array($date->format('Y-m-d'), $this->feries) ? '<p class="day text-blue">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>' : ($date->format('Y-m-d') === $this->toDay ? '<p class="day text-red">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>' : '<p class="day">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>'); $date->add(new DateInterval('P1D')); } $this->source .= '</div></div>'; } return $this->source; } public function getSecondSemestre($year): string { $date = new DateTime($year . '-07-01'); // Boucle sur le second trimestre for ($j=7; $j <= 12 ; $j++) { if ($j === 7) { $this->source = ''; } $this->daysInMonths = $date->format('t'); $this->source .= '<div class="col-2">'; $this->source .= '<div class="mois text-center bg-info">' . $this->months[$date->format('n')] . '</div>'; $this->source .= '<div class="days border-info bg-light">'; for ($i=1; $i <= $this->daysInMonths; $i++) { $this->source .= in_array($date->format('Y-m-d'), $this->feries) ? '<p class="day text-blue">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>' : ($date->format('Y-m-d') === $this->toDay ? '<p class="day text-red">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>' : '<p class="day">' . $this->days[$date->format('w')] . ' ' . $date->format('d') . '</p>'); $date->add(new DateInterval('P1D')); } $this->source .= '</div></div>'; } return $this->source; } public function getFeries($year) { $feries = [$year . '-01-01', $year . '-05-01', $year . '-05-08', $year . '-07-14', $year . '-08-15', $year . '-11-01', $year . '-11-11', $year . '-12-25']; // Pâques $dt = date('Y-m-d', easter_date($year)); $paques = date('Y-m-d', strtotime($dt. ' + 1 days')); array_push($feries, $paques); $lundi_paques = date('Y-m-d', strtotime($dt. ' + 2 days')); array_push($feries, $lundi_paques); $ascension = date('Y-m-d', strtotime($dt. ' + 40 days')); array_push($feries, $ascension); $pentecote = date('Y-m-d', strtotime($dt. ' + 50 days')); array_push($feries, $pentecote); $lundi_pentecote = date('Y-m-d', strtotime($dt. ' + 51 days')); array_push($feries, $lundi_pentecote); return $feries; } }
Le petit problème qu'il me reste à trouver est le fait que les mois n'ayant pas 31 jours comme février, l'affichage est un peu décalé.
Si tu as une idée, je t'en remercie par avance.
Je continue à chercher une solution.
Très cordialement.
2 août 2022 à 22:45
Bonsoir, j'ai trouvé ça sur google si tu veux t'en inspirer ou juste recopier les lignes :)
Bonne recherche .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Calendrier</title> <style type="text/css"> body {margin:0;padding:0;font:10px/13px "Courier New",Courier,monospace} h1 {margin:20px;padding:0;font:16px/20px;text-align:center;} a {text-decoration:none;color:#909;} .mst {font-size:12px} #cal {display:block;position:relative;margin:0 auto;width:840px;height:900px;overflow:hidden;} .clc {display:block;position:absolute;width:200px;padding:1px;background:#fff;} </style> </head> <body> <h1><a href="javascript:newAnn(-20)" title="Recul rapide - 20ans)">««</a> <a href="javascript:newAnn(-1)" title="Année précédente">«</a> Calendrier <span id="ida"></span> <a href="javascript:newAnn(+1)" title="Année suivante">»</a> <a href="javascript:newAnn(+20)" title="Avance rapide - 20 ans">»»</a> </h1> <div id="cal"></div> <script type="text/javascript"> var mos='Janvier|Février|Mars|Avril|Mai|Juin|Juillet|Août|Septembre|Octobre|Novembre|Décembre'.split(/\|/g); var tSt="Jour de l'an|St Basile|Ste Geneviève|St Odilon|St Edouard|Ste Mélaine|St Raymond|St Lucien|Ste Alix|St Guillaume|St Paulin|Ste Tatiana|Ste Yvette|Ste Nina|St Rémi|St Marcel|Ste Roseline|Ste Prisca|St Marius|St Sébastien|Ste Agnès|St Vincent|St Barnard|St François de Sales|St Apollos|Ste Paule|Ste Angèle|St Thomas d'Aquin|St Gildas|Ste Martine|Ste Marcelle|Ste Ella|St Théophane|St Blaise|Ste Véronique|Ste Agathe|St Gaston|Ste Eugénie|Ste Jacqueline|Ste Apolline|St Arnaud|ND de Lourdes|St Félix|Ste Béatrice|St Valentin|St Claude|Ste Julienne|St Alexis|Ste Bernadette|St Gabin|Ste Aimée|St Damien|Ste Isabelle|St Lazare|St Modeste|St Roméo|St Nestor|Ste Honorine|St Romain|St Auguste|St Aubin|St Jaouen|St Gwénola|St Casimir|St Olive|Ste Colette|Ste Félicité|St Jean de Dieu|Ste Françoise|St Vivien|Ste Rosine|Ste Justine|St Rodrigue|Ste Mathilde|Ste Louise|Ste Bénédicte|St Patrick|St Cyrille|St Joseph|St Herbert|Ste Clémence|Ste Léa|St Victorien|Ste Karine|Annonciation|Ste Lara|St Habib|St Gontran|Ste Gwladys|St Amédée|St Benjamin|St Hugues|Ste Sandrine|St Richard|St Isidore|Ste Irène|St Marcellin|St Jean-Baptiste|Ste Julie|St Gautier|St Fulbert|St Stanislas|St Jules|Ste Ida|St Maxime|St Paterne|St Benoît-Joseph|St Anicet|St Parfait|Ste Emma|Ste Odette|St Anselme|St Alexandre|St Georges|St Fidèle|St Marc|Ste Alida|Ste Zita|Ste Valérie|Ste Catherine|St Robert|St Jeremie|St Boris|St Philippe|St Sylvain|Ste Judith|Ste Prudence|Ste Gisèle|St Désiré|Ste Pacôme|Ste Solange|Ste Estelle|St Achille|Ste Rolande|St Matthias|Ste Denise|St Honoré|St Pascal|St Eric|St Yves|St Bernardin|St Constantin|St Emile|St Didier|St Donatien|Ste Sophie|St Bérenger|St Augustin|St Germain|St Aymard|St Ferdinand|Ste Perrette|St Justin|Ste Blandine|St Kevin|Ste Clotilde|St Igor|St Norbert|St Gilbert|St Médard|Ste Diane|Ste Trinité|St Barnabé|St Guy|St Antoine|St Elisée|Ste Germaine|St Régis|St Hervé|St Léonce|St Romuald|St Silvère|St Rodolphe|St Alban|Ste Audrey|St Yann|St Prosper|St Anthelme|St Fernand|St Irénée|St Pierre/St Paul|St Martial|St Thierry|St Martinien|St Thomas|St Florent|St Antoine|Ste Mariette|St Eliane|St Thibaud|Ste Amandine|St Ulric|St Benoît|St Olivier|St Henri/St Joël|St Camille/Fête Nationale|St Donald|Ste Carmen|Ste Charlotte|St Frédéric|St Arsène|Ste Marina|St Victor|Ste Marie-Madeleine|Ste Brigitte|Ste Christine|St Jacques|Ste Anne|Ste Nathalie|St Samson|Ste Marthe|Ste Juliette|St Ignace|St Alphonse|St Julien|Ste Lydie|St Jean-Marie|St Abel|St Octavien|St Gaétan|St Dominique|St Amour|St Laurent|Ste Claire|Ste Clarisse|St Hippolyte|St Evrard|Ste Marie/Assomption|St Armel|St Hyacinthe|Ste Hélène|St Jean-Eudes|St Bernard|St Christophe|St Fabrice|Ste Rose|St Barthélémy|St Louis|Ste Natacha|Ste Monique|St Augustin|Ste Sabine|St Fiacre|St Aristide|St Gilles|Ste Ingrid|St Grégoire|Ste Rosalie|Ste Raïssa|St Bertrand|Ste Reine|St Adrien|St Alain|Ste Inès|St Adelphe|St Apollinaire|St Aimé|St Materne|St Roland|Ste Edith|St Renaud|Ste Nadège|Ste Emilie|St Davy|St Matthieu|St Maurice|St Constant|Ste Thècle|St Hermann|St Côme/St Damien|St Vincent de Paul|St Venceslas|Sts Michel|St Jérôme|Ste Thérèse|St Léger|St Gérard|St François|Ste Fleur|St Bruno|St Serge|Ste Pélagie|St Denis|St Ghislain|St Firmin|St Wilfrid|St Géraud|St Juste|Ste Thérèse|Ste Edwige|St Baudouin|St Luc|St René Goupil|Ste Adeline|Ste Céline|Ste Elodie|St Jean de Capistran|St Florentin|St Crépin|St Dimitri|Ste Emeline|St Simon|St Narcisse|Ste Bienvenue|St Quentin|Toussaint|Défunts|St Hubert|St Charles|Ste Sylvie|Ste Bertille|Ste Carine|St Geoffroy|St Théodore|St Léon|St Martin|St Christian|St Brice|St Sidoine|St Albert|Ste Marguerite|Ste Elisabeth|Ste Aude|St Tanguy|St Edmond|Présentation de Marie|Ste Cécile|St Clément|Ste Flora|Ste Catherine|Ste Delphine|St Séverin|St Jacques de la Marche|St Saturnin|St André|Ste Florence|Ste Viviane|St Xavier|Ste Barbara|St Gérald|St Nicolas|St Ambroise|Ste Frida|St Pierre Fourier|St Romaric|St Daniel|Ste Chantal|St Lucie|Ste Odile|Ste Ninon|Ste Alice|St Gaël|St Gatien|St Urbain|St Théophile|St Pierre Canisius|Ste Françoise-Xavière|St Armand|Ste Adèle|Noël|St Etienne|St Jean|St Gaspard|St David|St Roger|St Sylvestre".split(/\|/g); function edtCal(a){ var chn='',ms=-1,bs=0,s=Math.floor(a/100),pl=(15-Math.floor(s/4)+s-Math.floor(((s<<3)+13)/25)+19*(a%19))%30,pj,pq,cn,pq,as,pn; if (pl==28) if (10<(a%19)) pl--;else pl++; pj=pl;if (pl!=29 || new Date(a,2,pl).getDay()) pj=pl-new Date(a,2,pl).getDay()+7; cn=new Date(a,2,pj-25).valueOf();pq=new Date(a,2,pj+21).valueOf(); as=new Date(a,2,pj+60).valueOf();pn=new Date(a,2,pj+70).valueOf(); for (i=1;;i++){cd=new Date(a,0,i); if (cd.getFullYear()!=a) break; if (cd.getMonth()!=ms) {ms=cd.getMonth(); if (chn) chn+='</div>'; chn+='<div class="clc" style="left:'+((140*ms)%840)+'px;top:'+((ms<6)?0:450)+'px"><b class="mst">'+mos[ms]+'</b><hr>'} if (i==60 && cd.getMonth()==2) bs++; y=z='';if (!cd.getDay()) {y='<u>';z='</u>';} if (cd.valueOf()==cn) chn+='Me '+cd.getDate()+' <b>Cendres *</b><br>'; else if (cd.valueOf()==pq) chn+='<u>Di '+cd.getDate()+' <b>Pâques *</b></u><br>'; else if (cd.valueOf()==as) chn+='Je '+cd.getDate()+' <b>Ascension *</b><br>'; else if (cd.valueOf()==pn) chn+='<u>Di '+cd.getDate()+' <b>Pentecôte *</b></u><br>'; else chn+=y+"DiLuMaMeJeVeSa".substr(2*cd.getDay(),2)+' '+cd.getDate()+' '+tSt[i-1+bs]+z+'<br>';} chn+='</div>'; document.getElementById('ida').innerHTML=a; document.getElementById('cal').innerHTML=chn; } edtCal(new Date().getFullYear()); function newAnn(d){var a=document.getElementById('ida').innerHTML;edtCal(parseInt(a)+d);} </script> </body> </html>