HTML table 과제

timework
1   2 5 9
11 12 13   15 16 17 18 19
21 25 26 28
31     32 38
42 44 45   59
51 52   56 57 58
61 63 64   66  
71 73 74 76   78 79
81 83 86  
<style>
table, td{
  border: 3px solid #000;
  border-collapse: collapse;
  text-align:center;
}
.top {
  border-top: none;
}
.left {
  border-left: none;
}
.right {
  border-right: none;
}
.bottom {
  border-bottom: none;
}
.bg1 {
  background-color: #b0e0e6;
}
.bg2 {
  background-color: #6495ED;
}
.bg3 {
  background-color: #00FFFF;
}
.bg4 {
  background-color: #00BFFF;
}
.bg5 {
  background-color: #1E90FF;
}
.bg6 {
  background-color: #87CEFA;
}
.bg7 {
  background-color: #9370DB;
}
</style>



timework

<table style="width:30%">
 <tbody><tr>
    <td>1</td>
    <td class="right bg1" colspan="2">&nbsp;</td>
    <td class="left bottom bg1">2</td>
    <td class="bg2" colspan="4">5</td>
    <td>9</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td class="top bg1" rowspan="2">&nbsp;</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td class="bg3" rowspan="3">19</td>
  </tr>
  <tr>
    <td class="bg3" colspan="3">21</td>
    <td>25</td>
    <td class="bg7" colspan="2" rowspan="2">26</td>
    <td>28</td>
  </tr>
  <tr>
    <td class="right bg4" rowspan="2">31</td>
    <td class="left bg4" colspan="1">&nbsp;</td>
    <td class="right bg5" rowspan="3">&nbsp;</td>
    <td class="left bg5" colspan="2">32</td>
    <td>38</td>
    
  </tr>
  <tr> 
    <td>42</td>
    <td>44</td>
    <td>45</td>
    <td class="right bg6" colspan="3">&nbsp;</td>
    <td class="left bg6" rowspan="3">59</td>
  </tr>
  <tr>
    <td>51</td>
    <td class="bg2" rowspan="4">52</td>
    <td class="left bg5" colspan="2">&nbsp;</td>
    <td>56</td>
    <td>57</td>
    <td>58</td>
  </tr>
  <tr>
    <td>61</td>
    <td>63</td>
    <td>64</td>
    <td class="bottom bg7">&nbsp;</td>
    <td>66</td>
    <td class="right bottom bg6" colspan="2">&nbsp;</td>
    
  </tr>
  <tr>
    <td>71</td>
    
    <td>73</td>
    <td class="top bg7" colspan="2" rowspan="2">74</td>
    <td>76</td>
    <td class="right top bg6" rowspan="2">&nbsp;</td>
    <td>78</td>
    <td>79</td>
  </tr>
  <tr>
    <td>81</td>
    <td>83</td>
    <td>86</td>
    <td class="left bg6" colspan="2">&nbsp;</td>
  </tr>
</tbody></table>

답글 남기기