Bonjour,
Voilà mon super tableau c'est exactement le résultat que je souhaite obtenir en plus d'être responsive :
https://imgur.com/HJA2Str
maintenat ne manque plus que la touche final une image lien qui remplir les grandes cellules:
https://imgur.com/nbLt9dK
Oh non catastrophe ! malgré tout mes éfforts je ne parvient pas à viré ses vilaine marge :(
le code HTML sans le lien:
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table width="100%" height="100%" border="1">
<tbody>
<tr>
<td colspan="5" height="70px"><div class="menu">
<a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
</div></td>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td rowspan="2">15</td>
<td>16</td>
<td rowspan="2">17</td>
<td>18</td>
</tr>
<tr>
<td rowspan="2">19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>
Avec le lien:
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table width="100%" height="100%" border="1">
<tbody>
<tr>
<td colspan="5" height="70px"><div class="menu">
<a href="../zouak/" >La compagnie</a><a href="../nos-spectacles/">Nos spectacles</a><a href="../nous-contacter/">Nous contacter</a>
</div></td>
</tr>
<tr>
<td>1</td>
<td rowspan="2"><a href="url" ><img src="https://loremflickr.com/390/290"></a></td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td rowspan="2">15</td>
<td>16</td>
<td rowspan="2">17</td>
<td>18</td>
</tr>
<tr>
<td rowspan="2">19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>
Le CSS
html, body
{
width: 100%;
height: 100%;
}
div.menu
{ width: 100%; height: 70px; padding: 0 50px; background-color: #C43100; }
div.menu a:link, div.menu a:visited
{
display: inline-block;
font-size: 18px;
font-weight: bold;
padding: 20px 20px;
text-decoration: none;
color: #fff;
}
div.menu a:hover, div.menu a#hover
{ background-color: #d23f0e; }
table
{
width: 100%;
height: 100%;
border: 1;
}