Forum de discussion
Forum « Programmation Javascript » (archives)
Re: Styles et tableaux CSS avec bordures et lignes
Envoyé: 22 décembre 2005, 7h43 par Oznog
Tu as plusieurs possibilités.
1. Tu peux simplement avoir un tableau à l'intérieur d'un autre et avec un padding de 1 pixel autour des cellule. Comme ce forum réalisé il y a près de 10 ans.
2. Ou avec une feuille de styles (CSS).
De façon simple :
Au lieu d'avoir une bordure autour de tout le tableau, fait une bordure seulement à gauche, droite et en bas. Puis une bordure pour chacune des cellule, mais seulement en haut, comme l'exemple ci-dessous : (note que pour gérer les marge, utilise aussi le CSS.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Trucsweb - Exemple de tableau HTML avec bordure CSS</title>
<style type="text/css">
<!--
table.bordure { border-left: #ccc 1px solid;border-right: #ccc 1px solid;border-bottom: #ccc 1px solid;}
table.bordure td { border-top: #ccc 1px solid; }
-->
</style>
</head>
<body>
<table width="100%" class="bordure" border="0" cellspacing="0" cellpadding="0" summary="Exemple de tableau HTML avec bordure CSS">
<caption>Bordure CSS</caption>
<tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr>
<tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td></tr>
</table>
</body>
</html>
3. Plus complexe mais très flexible et plus stable, travaille avec les couleurs de fonds et les marges :
Va lire (et d'ailleurs tu aurais dû voir ça avant de poser une question!) « Colorer vos tableaux en CSS avec bordure » (http://www.trucsweb.com/CSS/trucs.asp?no=321&type=12)
Ciao
Oznog
Réponses
|
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion