Tableau

Bonjour,

J'ai un souci de CSS pour réaliser un tableau. Mon tableau ne se ferme pas en bas.
Le tableau doit être composé de deux lignes et deux colonnes.
cellule en haut à gauche : sans bordure, fond blanc
cellule en haut à droite : sans bordure, fond noir, et carrée
cellule en bas à gauche : des bordures fines partout
cellule en bas à droite : sans bordure, fond blanc.

+ j'aimerais qu'une des cellules ait une taille fixe de 10 px X 10 px. J'ai essayé avec les attributs Height et Width et ça ne fonctionne pas. Auriez-vous une idée ?

La CSS

.td-black{
	color:white;
	background:black;
	border-style:none;
	border-width:0px;
	font-size:0.75em;
	font-style:normal;
	width:10%;
	height:10%;
		padding:5px;
	text-align:center;
}
.td-vide{
	color:#5a5858;
	background:white;
	border-style:none;
	font-size:0.75em;
	text-align:left;
	padding:0px;
}
.td-titre{
	color:#5a5858;
	background:white;
	border:1px solid #5a5858;
	font-size:0.75em;
	text-align:left;
	padding:1px;
	height: 10px;
	border-collapse:collapse;
}

table {
	border-collapse:collapse;
	margin-top:10px;
	margin-bottom:10px;
	table-layout:auto;
}

td, th {
	color:#5a5858;
	background:#d5d5d5;
	border-style:dashed;
	border-width:1px;
	font-size:0.75em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	padding:5px;
	text-align:center;
}

Le code HTML

<div class="table" id="Tableau1">
    <table class="table frame" rules="all">
      <tr>
        <td class="td-vide" valign="top"><br /></td>

        <td class="td-black" id="index-cell-d25e105" valign="top">4</td>
      </tr>

      <tr>
        <td class="td-titre">
          <h1>LES RESSOURCES NUMÉRIQUES. DE QUOI PARLE-T-ON ?</h1>
        </td>

        <td class="td-vide" id="index-cell-d25e110" valign="top">
          <p class="auteur" style="margin-left: 20px; font-size: medium; letter-spacing: normal;"><a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque neque in lorem convallis, sit amet sagittis elit accumsan. Donec elementum nisi vel orci dapibus, at vestibulum nulla finibus. Nullam nulla ex, semper at tempus sed, sodales non lectus.">par Lorem ipsum</a></p>
        </td>
      </tr>
    </table>
  </div> 

Modifié par Tony Monast (30 Oct 2014 - 14:42)