표 태그 만들기와 스타일 - 기본적인 table 태그, css 파일과 사용방법 > 웹제작/운영

표 태그 만들기와 스타일

기초적인 table 태그와 표 코드 꾸미기

홈페이지에서 table(표)를 만드는 태그와 표(table)에 스타일을 주는 방법을 설명하되, 가장 기본적인 부분을 정리하려고 한다. 그러므로 HTML파일과 CSS파일이 필요하다. 

추가로, 온라인으로 표를 만드는 사이트도 소개한다.

표 태그 만들기와 스타일 - 기초적인 table 태그와 표 코드 꾸미기

온라인 표만들기 사이트

홈페이지에서 표를 만드는 것은 워드 문서에서 표를 만드는 것에 비해 매우 번거롭고 복잡하다. 

그래서 온라인에서 표만들기를 대신해 주는 사이트도 존재한다. 아래의 Tables Generator라는 사이트를 방문해 보자. 

온라인 표 작성 사이트 링크

Tables Generator 홈페이지에서 "HTML"을 선택한 후, "File"에서 "New table"을 선택한다.

이때 뜨는 창에서 Rows(줄 수), Columns(가로 칸 수)를 입력하고 Create를 누르면 뚝딱 만들어 준다. 

그러면 표가 보이고, 칸을 더블클릭하면 글자를 입력할 수 있다. 잘 모르겠으면 메뉴의 오른쪽 끝에 있는 "Theme"에서 고르면 된다. 

표 태그를 공부하고 싶다면 그 아래에 있는 코드창을 보면 된다. 

지금부터 시작할 아래의 표 코드와 Tables Generator의 코드창 코드를 비교하면 도움이 많이 될 것이다.

가장 기본적인 표 태그 만들기

HTML에서 표를 만드는 태그의 가장 기본적인 배치의 예제를 보자면 아래와 같다.

아래처럼 표 코드를 짜면 한 줄의 표가 된다. 이렇게 말이다.

[code]

<table>

   <tr>

      <td>내용</td>

   </tr>

</table>

[/code]

규칙은 이렇다.

• 처음과 끝은 반드시 table로 시작하고 /table로 끝나야 한다. 
• 줄을 늘리려면 tr부터 /tr까지를 추가한다. 
• 옆으로 칸을 늘리려면 td부터 /td까지를 추가한다.

위의 표 예제는 1줄짜리 표지만, 이번에는 2줄에 가로 3칸 짜리를 만들어 보자. 

이렇게 말이다.

[code]

<table>

   <tr>

      <td>내용</td><td>내용</td><td>내용</td>

   </tr>

   <tr>

      <td>내용</td><td>내용</td><td>내용</td>

   </tr>

</table>

[/code]

tr이 두 번 반복된다. 이것은 2줄을 만들겠다는 의미다. 

각 줄마다 td가 세 번 반복된다. 옆으로 3칸을 만들겠다는 의미다. 

즉, 아래 방향의 줄 수와 옆 방향의 칸 수는 이 태그들이 "몇 번 반복되냐"로 결정되는 것이다. 

그러므로 위와 같이 하면 모두 6개의 셀(Cell)이 생기게 된다.

table 태그를 사용해서 표 모양 꾸미기

엑셀을 해 보면 표의 맨 위는 각각의 제목을 입력할 수 있게 한다. 아래처럼 말이다.

thead를 쓰면	맨 위 여기가	제목 표시 줄이 됨

 

이렇게 하려면 <tr> 한 덩어리를 thead와 /thead로 감싸면 된다. 아래 코드 예제와 위의 표 코드 예제를 비교하면서 보자.

[code]

<table>

<thead>

   <tr>

      <td>thead를 쓰면</td><td>맨 위 여기가</td><td>제목 표시 줄이 됨</td>

   </tr>

</thead>

   <tr>

      <td>내용</td><td>내용</td><td>내용</td>

   </tr>

</table>

[/code]

만약, 셀(Cell) 구분선의 색이나 모양을 바꾸고 싶다면 CSS 파일에 아래처럼 적어주면 된다. (코드에서 #부분이 색을 의미하는 코드 부분이다)

[code]

<style>

   table { width:100%; }

   table { border:1px solid #444444; }

   th, td { border: 1px solid #444444; }

   table { border-collapse:collapse; }

</style>

[/code]

위의 코드가 무엇을 의미하는지는 아래 설명과 비교하면 이해가 될 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

• 첫 번째 줄처럼 하면 : 표 크기를 꽉 차게 만들 수 있다.
• 두 번째 줄처럼 하면 : 표 바깥쪽에 테두리가 생긴다. 
• 세 번째 줄처럼 하면 : 표 내부에도 구분선이 생긴다.
• 네 번째 줄처럼 하면 : 내부 구분선을 날렵하게 만들 수 있다.

여기까지, 가장 기초적인 표 태그와 테이블(table) 코드 사용방법을 설명했다. 

조금 더 복잡한 태그 사용방법은 다음 편에서 다룰 예정이다.