HTML로 99개의 표 만들기
우선은 body를 만들어 갑니다.
index.html
<!DOCTYPE html>
</head>
<body>
<table>
<tr>
<th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th<<th>8</th><th>9</th>
</tr>
<tr>
<th>1</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
</tr>
<tr>
<th>2</th><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
</tr>
<tr>
<th>3</th><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
</tr>
<tr>
<th>4</th><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
</tr>
<tr>
<th>5</th><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
</tr>
<tr>
<th>6</th><td>6</td><td>12</td><td>18</td><td>24</td><td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
</tr>
<tr>
<th>7</th><td>7</td><td>14</td><td>21</td><td>28</td><td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
</tr>
<tr>
<th>8</th><td>8</td><td>16</td><td>24</td><td>32</td><td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
</tr>
<tr>
<th>9</th><td>9</td><td>18</td><td>27</td><td>36</td><td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
</tr>
</table>
</body>
</html>
이것에 CSS로 디자인해 갑니다.
index.html
body {
font-size: 22px;
background: #808080;
}
table {
border-collapse: collapse;
border-collapse: separate;
border-spacing: 2px 2px;
}
th {
background: #FFA500;
padding: 3px 12px;
}
td {
text-align: right;
background: white;
}
이제 이렇게 됩니다.
Reference
이 문제에 관하여(HTML로 99개의 표 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/All-human_moratorium/items/85b2ce2b86f984dc1a36텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
