Comment arrondir les angles des tableaux ?

Résolu/Fermé
kroospy Messages postés 4 Date d'inscription mardi 4 juin 2013 Statut Membre Dernière intervention 5 juin 2013 - 4 juin 2013 à 17:51
kyser soze Messages postés 816 Date d'inscription mercredi 20 février 2013 Statut Membre Dernière intervention 24 novembre 2018 - 5 juin 2013 à 15:07
bonjour,

je debute dans le langage html et voudrais savoir comment arrondir un tableau. que faut il mettre et ou, voici mes fichiers :

dans le fichier html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet"href="style2.css"/>
<title>Titre</title>
</head>

<body>

<div class="Tableau">
<p class="legende">
<span class="col1">Légende 1</span>
<span class="col2">Légende 2</span>
<span class="col3">Légende 3</span>
<span class="col4">Légende 4</span>


</p>
<p>
<span class="col1">Case 1.1</span>
<span class="col2">Case 1.2</span>
<span class="col3">Case 1.3</span>
<span class="col4">Case 1.4</span>


</p>
<p>
<span class="col1">Case 2.1</span>
<span class="col2">Case 2.2</span>
<span class="col3">Case 2.3</span>
<span class="col4">Case 2.4</span>

</p>

<p>
<span class="col1">Case 3.1</span>
<span class="col2">Case 3.2</span>
<span class="col3">Case 3.3</span>
<span class="col4">Case 3.4</span>

</p>
</div>
</body>
</html>


dans le fichier css :
.Tableau span {
display:inline;
float:left;
border:1px solid #99CC66;
margin:0px;
padding:3px;
}
.Tableau p {
clear:left;
margin:100px;
padding:0px;
height:120% !important; height:1em;
}
.Tableau p.legende {font-weight:bold}
.Tableau span.col1 {width:70px}
.Tableau span.col2 {width:120px}
.Tableau span.col3 {width:95px}
.Tableau span.col4 {width:140px}

5 réponses

inspiring Messages postés 1811 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 267
4 juin 2013 à 21:52
Si tu veux un peu plus d'infos sur comment personnaliser un tableau html, j'ai fais un petit sujet là dessus :
http://dbmwebdesign.fr/Tutos/design-table/table-design.html
2
kroospy Messages postés 4 Date d'inscription mardi 4 juin 2013 Statut Membre Dernière intervention 5 juin 2013
5 juin 2013 à 14:40
bonjour,
j'ai fais un tour sur ton lien et je trouve qu'il est très intéressant et m'a apporté beaucoup dans mon problème de concevoir les tableaux.
Merci
0
kroospy Messages postés 4 Date d'inscription mardi 4 juin 2013 Statut Membre Dernière intervention 5 juin 2013
4 juin 2013 à 18:10
salut,

merci ça marche nickel
0
kyser soze Messages postés 816 Date d'inscription mercredi 20 février 2013 Statut Membre Dernière intervention 24 novembre 2018 97
5 juin 2013 à 10:55
Résolu please
0
kroospy Messages postés 4 Date d'inscription mardi 4 juin 2013 Statut Membre Dernière intervention 5 juin 2013
5 juin 2013 à 14:41
bonjour,

resolu
0
kyser soze Messages postés 816 Date d'inscription mercredi 20 février 2013 Statut Membre Dernière intervention 24 novembre 2018 97
5 juin 2013 à 15:07
Il y a un lien que tu as en haut de la conversation pour qu'elle apparaisse comme résolu!
0
kyser soze Messages postés 816 Date d'inscription mercredi 20 février 2013 Statut Membre Dernière intervention 24 novembre 2018 97
4 juin 2013 à 17:54
Salut salut,

C'est la propriété border-radius, vu qu'elle soule tout le monde il y a des petits utilitaires en ligne pour t'aider :
https://border-radius.com/
Ca te génère le css correspondant
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Ysabe_l Messages postés 11751 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 7 octobre 2022 272
4 juin 2013 à 17:58
Bonjour,

Ce que tu as fait donne peut être l'aspect d'un tableau mais ce n'est pas un tableau.

Un tableau se construit comme ça :

<table> // début de tableau
	<tr> // début ligne 1
		<th>titre 1</th> // titre de la première colonne
		<th>titre 2</th> // titre de la seconde colonne
		<th>titre 3</th> // titre de la troisième colonne
	</tr> // fin ligne 1
	<tr> // début ligne 2
		<td>case 1.1</td>
		<td>case 1.2</td>
		<td>case 1.3</td>
	</tr> // fin ligne 2
	<tr> // début ligne 3
		<td>case 2.1</td>
		<td>case 2.2</td>
		<td>case 2.3</td>
	</tr> // fin ligne 3
</table> // fin de tableau


Et donc pour que les bords soient arrondis dans ton css il faudra mettre

table {
	border-radius: 5px;
}


en mettant le chiffre que tu veux à la place de 5px, c'est l'angle de l'arrondi (plus il est gros plus c'est arrondi).
-1