table
| 1 |
2 |
|
5 |
6 |
|
8 |
9 |
| 11 |
|
|
|
18 |
19 |
| 21 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 61 |
|
|
|
|
|
|
|
|
|
| 81 |
|
|
|
|
|
|
89 |
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="html, html5, css3, table">
<meta name="Description" content="html5 웹표준기반 테이블 과제입니다.">
<title>table</title>
<style>
* {
box-sizing:border-box;
margin:0; padding:0;
}
table {
border: 5px solid #000;
border-collapse: collapse;
text-align:center;
margin:10px auto;
background: #FFDBAA;
}
tbody {
}
tr {
}
td {
border: 2px dashed #4c4c4c;
border-collapse: collapse;
text-align:center;
width: 40px; height: 40px;
}
.top {
border-top: none;
}
.left {
border-left: none;
}
.right {
border-right: none;
}
.bottom {
border-bottom: none;
}
.bg1 {
background-color: #BEADFA;
}
.bg2 {
background-color: #FF90BC;
}
.bg3 {
background-color: #FED9ED;
}
.bg4 {
background-color: #D4E2D4;
}
.bg5 {
background-color: #CAEDFF;
}
.bg6 {
background-color: #87CEFA;
}
.bg7 {
background-color: #FFCCCC;
}
.bg8 {
background-color: #FBA1B7;
}
.bg9 {
background-color: #FBA1B7;
}
</style>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="bg1 bottom" colspan="2"></td>
<td>5</td>
<td class="right bg2">6</td>
<td class="left right bg2"></td>
<td class="left bg2">8</td>
<td>9</td>
</tr>
<tr>
<td class="right bg3">11</td>
<td class="left bg3"></td>
<td class="top bg1"></td>
<td class="bg4 bottom" colspan="4"></td>
<td class="bottom bg6">18</td>
<td>19</td>
</tr>
<tr>
<td >21</td>
<td></td>
<td class="right bg7" rowspan="3"></td>
<td class="top bg4" rowspan="2"></td>
<td class="bottom bg5" colspan="2"></td>
<td class="top bg4" rowspan="2"></td>
<td class="top right bg6" rowspan="3"></td>
<td></td>
</tr>
<tr>
<td class="right bg8" rowspan="2"></td>
<td></td>
<td class="top bg5" colspan="2"></td>
<td></td>
</tr>
<tr>
<td class="left bg8"></td>
<td class="left bg7" colspan="3"></td>
<td></td>
<td class="left bottom bg6"></td>
</tr>
<tr>
<td class="bottom bg1" colspan="3"></td>
<td class="bottom bg3" colspan="2"></td>
<td class="bottom bg8" colspan="3"></td>
<td class="top bg6" rowspan="3"></td>
</tr>
<tr>
<td>61</td>
<td class="bottom bg2"></td>
<td class="top bg1" rowspan="2"></td>
<td class="right bg5"rowspan="3"></td>
<td class="top bg3" rowspan="2"></td>
<td class="top right bg8" rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="top bg2" colspan="2"></td>
<td class="left bg8"colspan="2"></td>
</tr>
<tr>
<td>81</td>
<td></td>
<td></td>
<td class="left bg5"></td>
<td></td>
<td></td>
<td></td>
<td>89</td>
</tr>
</tbody>
</table>
0 comments on “HTML TABLE”Add yours →