따라하며 배우는 HTML - #10 ( Table - border collapse )

TABLE ( Border-Collapse )

이번 시간에는 테이블의 테두리를 하나로 축소시키는 방법과 더불어 테이블 태그의 한 예인 게시판 형태로 만들어 보는 것에 대해서 알아보도록 하겠습니다 

먼저 영상으로 한번 확인 해 보시죠 ^^

테이블의 테두리를 하나로 축소시키는 방법은 스타일 속성을 이용하면 됩니다. 

table { border-collapse: collapse }

테두리가 2줄로 되어진것보다 훨씬 깔끔해 보이죠..

사람마다 바라보는 시각이 다르겠지만...그냥 그렇다고 해주세요..^^

테이블 태그에 제목 넣는 곳을 td 대신 th 로 변경 했습니다.  

th 로 변경을 하면 텍스트의 굵기가 두꺼워 집니다. 

테이블의 열 부분에서 제목으로서 역할을 하게 됩니다 .

테이블을 이용하여 공지사항 게시판 형태의 페이지를 만들어봅시다. 

아래와 같이 소스코드를 타이핑 하게 되면 게시판 형태가 만들어집니다. 

        <table>

              <tr>

                    <th>번호</th>

                    <th>제목</th>

              </tr>

              <tr>

                    <td>1</td>

                    <td>공지사항입니다.</td>

              </tr>

              <tr>

                    <td>2</td>

                    <td>두번째 공지사항입니다.</td>

              </tr>

              <tr>

                    <td>3</td>

                    <td>세번째 공지사항입니다.</td>

              </tr>

        </table>

테이블 태그에 집중하기 위해서 다른 소스코드를 넣지 않았지만

이전 시간에 배웠던 스타일 속성을 넣게 되면 더 멋진 게시판 형태의 공지사항 리스트를 만들어 낼 수 있습니다 .

그건 여러분의 몫으로 남겨 두겠습니다. 한번 꼭 해 보시길 권해 드립니다.

그럼 다음시간에 또 뵈요 ^0^