[HTML 기본 요소] 테이블

공부 참고 : http://tcpschool.com/html/html_basic_tables

▶ 테이블

▣ 테이블

- 테이블이란 데이터를 보기 좋게 정리하여 보여주는 표를 의미.

- <table> 태그 구성

☞ <tr>태그는 테이블에서 열을 구분해 줌.

☞ <th>태그는 각 열의 제목을 나타냄.

☞ <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어줌.

    

        
참치
        
고래
      
    
    

        
상어
        
문어
    
    

        
오징어
        
고등어
    

- 결과 화면

참치	고래
상어	문어
오징어	고등어

- CSS의 border 속성을 이용하여 테이블에 테두리를 표현가능

- 명시하지 않으면 테이블은 빈 테두리를 가짐.

- 예제

<style>

    table, th, td { border: 1px solid black }

</style>

- 위의 예제는 테두리가 2줄씩 나타남.

☞ 그 이유는 <table>태그와 <th>, <td>태그가 모두 자신만의 테두리를 가져서임.

- 한 줄로 설정하기 : border-collapse 속성 이용

<style>

    table, th, td { border: 1px solid black; border-collapse: collapse }

</style>

▣ 열과 행 합치기

- 열 합치기 : colspan 속성 이용

- 행 합치기 : rowspan 속성 이용

    

        
1
    
    

        
2
    
    

        
3
        
4
        
5
        
6
        
7
    
    

        
8
        
9
    
    

        
10
    

- 결과 화면

1
2
3	4	5		6	7
		8			9
		10