[HTML] table 만들기, thead, tfoot, tbody, scope, col, row, colspan, rowsp…
페이지 정보
작성자 구피아 작성일17-02-13 17:02 조회7,308회 댓글0건관련링크
본문
다양한 테이블 요소들을 적용해서 표를 만들어 보도록 하겠습니다.
사용되는 요소와 속성에는 caption, colgroup, rowgroup, summary, class, col, row, span, thead, tr, th, td, rowspan, colspan, scope, tfoot, tbody 등이 있습니다.
우선 결과물부터 보면 다음과 같습니다.
모양은 그다지 이쁘지 않지만 각 테이블 요소와 속성들이 어떻게 적용되어 사용될 수 있는지 살펴볼 수 있을 거에요.
위 결과물에 대한 소스는 아래와 같습니다.
<table class="testTable" summary="테이블 만들기 예제">
<caption>Caption</caption>
<colgroup>
<col width="30"/>
<col />
<col span="3" width="50" />
</colgroup>
<thead>
<tr>
<th rowspan="2" colspan="2" scope="col">01</th>
<th colspan="3" scope="colgroup">02</th>
</tr>
<tr>
<th scope="col">06</th>
<th scope="col">07</th>
<th scope="col">08</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2" scope="row">09</th>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">25</th>
<th scope="row">13</th>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<th scope="row">17</th>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<th scope="row">21</th>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
</tbody>
</table>
결과물로는 표시되지 않지만 웹 접근성을 위해 summary, scope 지정은 해주는 게 좋다고 하네요.
댓글목록
등록된 댓글이 없습니다.