html 테이블 구조 연습

xhtml에서는 table태그 사용이 금지되었다가

html5로 넘어오면서 table태그를 다시 사용하기 시작했다고 합니다.

 

table로는 웹 구조를 잘 짜지 않습니다.

html5에서는 시멘틱 태그들을 이용해 구조 잡는게 중요하다고 합니다.

 

저는 지난시간에 공부했던 table태그에 대해 좀 더 연습해 보기 위해

table태그를 이용해 홈페이지 layout을 구성 해 보았습니다.

 

---

예제 홈페이지

공부를 도와주고 계신 강사님께서 제공 해 주신 예시 홈페이지 입니다.

 

먼저 어떻게 구조를 짤 지 고민 해 보았습니다.

구조 고민

큰 테이블을 하나 생성 한 후

테이블 내부에 필요한 테이블들을 추가로 생성하고 colspan과 rowspan태그를 활용해 만들어보면 되겠다 생각했습니다.

 

        <!-- ***** MAIN TABLE ***** -->
        <table width="1000" height="700" border="1" align="center">
            <tr><!--상단-->
                <td height="120">
                    <!--상단 테이블 구성-->
                    <table width="1000" height="120", border="1">
                        <tr>
                            <td colspan="5" height="20">
                            </td>
                        </tr>

                        <tr>
                            <td width="120" height="80"> <!--logo-->
                            </td>

                            <td width="50"> <!--blank-->
                            </td>

                            <td> <!--navigation-->
                                <!--내비게이션 테이블 구성-->
                                <table width="680" height="80" border="1">
                                    <tr>
                                    	<td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                            </td>

                            <td width="50"> <!--blank-->                           
                            </td> 

                            <td width="100"> <!--short cut button-->
                            </td>
                        </tr>

                        <tr>
                            <td colspan="5" height="20"></td>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr><!--메인이미지-->
                <td height="300">
                </td>
            </tr>


            <tr><!--컨텐츠-->
                <td height="300">
                    <!--컨텐츠 내부 테이블-->
                    <table width="1000" height="300" border="1">
                        <tr height="150">
                            <td width="333">
                            </td>

                            <td width="333">
                            </td>

                            <td width="333">
                            </td>
                        </tr>

                        <tr>
                            <td></td>
                            <td colspan="2"></td>
                        </tr>
                    </table>
                </td>
            </tr>


            <tr><!--하단-->
                <td height="80"></td>
            </tr>
            
        </table>

table태그만 사용하면 화면에 시각적으로 보여지지 않습니다.

테이블 구조를 확인하며 연습하기 위해 border="1" 속성을 사용해 선을 표시했습니다.

 

colspan과 rowspan속성을 이용해 구조를 먼저 나눈 다음,

width 와 height속성을 사용해 적정한 사이즈를 지정 해 주었습니다.

 

헤더에 내비게이션 부분과, 컨텐츠부분을 보면 <td>태그안에 <table>태그를 한 번 더 사용했습니다.

테이블 안에 테이블을 추가로생성하는것도 가능합니다.

 

코딩을 하고 있으면 점점 코드가 길어지면서 가독성이 떨어집니다.

항상 작업을 할 때 주석을 달아주고, 들여쓰기를 신경쓴다면 좀 더 수월한 코딩작업이 될 수 있을것입니다.

 

테이블 구조

 

이후 몇 가지 배너 이미지와 글자를 간단히 입력 해 보면

이미지와 글자 입력

 

꽤 홈페이지 스러운 모습이 나옵니다.

 

메인배너와 로고들은 <img>태그를 이용해 적용하였고,

공지사항과 보도자료 부분은 <ul>태그를 이용해 리스트 형태로 적용했습니다.

 

이미지태그와 리스트 태그는 지난글을 참고하면 됩니다.

 

 

리스트태그

html 글자태그 - 줄바꿈, 공백, 제목, 리스트

 

이미지태그

html 이미지태그 - img