Квадратная таблица

Привет:-) Я сразу признаюсь - я не бум-бум в HTML, особенно в таблицах. Вот дали задание: создать таблицу, и я вообще не знаю, как сделать....Вот такое вот задание...
7 ответов

#left_up{
    height:100px;
    width:90px;
    background-color:#000;
    }
 
#right_up{
    height:100px;
    width:90px;
    background-color:#333;
    }
 
 
#left_down{
    height:100px;
    width:90px;
    background-color:#999;
    }
 
#right_down{
    height:100px;
    width:90px;
    background-color:#666;
    }
<table width="500" border="1" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    
    <table width="300" border="1" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    
    <table width="100" border="1" align="center">
  <tr>
    <td><div id = "left_up"></div></td>
    <td><div id = "right_up"></div></td>
  </tr>
  <tr>
    <td><div id = "left_down"></div></td>
    <td><div id = "right_down"></div></td>
  </tr>
</table>
 
    
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
 
    
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
со вставкой проблем не будет?


Ой не думала что найду ответ так быстро Спасибо вам большое
со вставкой проблем не будет?
<head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
как то такНазвала style.css


Всегда пожалуйста))


Извините пожалуйста, возник мааааленький нюанскак расширить вот эти строки или ячейки...?


Да вот так же!
#left_up{
    height:100px;
    width:90px;
    background-color:#000;
    }
 
#right_up{
    height:100px;
    width:90px;
    background-color:#333;
    }
 
 
#left_down{
    height:100px;
    width:90px;
    background-color:#999;
    }
 
#right_down{
    height:100px;
    width:90px;
    background-color:#666;
    }
 
 
#top_out{
    height:60px;
    
    }
 
#top_in{
    height:60px;
    
    }
 
#bottom_in{
    height:60px;
    
    }
 
#bottom_out{
    height:60px;
    
    }
<table width="500" border="1" align="center">
  <tr>
    <td>
    
    <div id = "top_out"></div>
    
    </td>
  </tr>
  <tr>
    <td>
    
    <table width="300" border="1" align="center">
  <tr>
    <td>
    
    <div id = "top_in"></div>
    
    </td>
  </tr>
  <tr>
    <td>
    
    <table width="100" border="1" align="center">
  <tr>
    <td><div id = "left_up"></div></td>
    <td><div id = "right_up"></div></td>
  </tr>
  <tr>
    <td><div id = "left_down"></div></td>
    <td><div id = "right_down"></div></td>
  </tr>
</table>
 
    
    </td>
  </tr>
  <tr>
    <td>
    
    <div id = "bottom_in"></div>
    
    </td>
  </tr>
</table>
 
    
    </td>
  </tr>
  <tr>
    <td>
    
    <div id = "bottom_out"></div>
    
    </td>
  </tr>
</table>


супер


а зачем такая вложенность? может я чего не понял?
<style type="text/css">
.slyTaBlya {border-collapse:collapse;}
.slyTaBlya td {border:1px solid black; padding:5px; vertical-align:top;}
</style>
 
<table class="slyTaBlya"><tr>
<td colspan="6">0</td>
</tr><tr>
<td rowspan="4">6</td>
<td colspan="4">7</td>
<td rowspan="4">11</td>
</tr><tr>
<td rowspan="2">13</td>
<td>14</td>
<td>15</td>
<td rowspan="2">16</td>
</tr><tr>
<td>20</td>
<td>21</td>
</tr><tr>
<td colspan="4">25</td>
</tr><tr>
<td colspan="6">30</td>
</tr></table>