먼저 한 행 내의 셀을 열 단위로 연결할 수 있는 방법을 보여드리겠습니다. 즉, 관련 행 내의 열이 여러 열에 걸쳐 확장될 수 있습니다.
예를 들어 보겠습니다:
<table border="1"> <tr> <th colspan="2">Dates</th> </tr> <tr> <td>11.4.2014</td> <td>12.4.2012</td> </tr> <tr> <td>13.4.4.2014</td> <td>14.4.2014</td> </tr> <tr> <td>15.4.2014</td> <td>16.4.2014</td> </tr> </table>
먼저 여기에 사용된 th 요소에 대해 한 마디 하겠습니다. 이 요소는 헤더 셀을 식별하는 데 사용됩니다. 브라우저는 일반적으로 이 셀을 굵은 글씨로 가운데에 표시합니다. 다음은 브라우저에 표시되는 결과입니다:
colspan 속성은 도입부 th 내에 설정됩니다. 현재 셀이 확장되어야 하는 열의 수가 값으로 예상됩니다. 지정된 열의 개수가 올바른지 항상 확인하세요. 그렇지 않으면 보기 좋지 않은 결과가 나올 수 있습니다. 이 예제에서는 TH로 표시된 머리글 행이 두 열에 걸쳐 확장되어야 합니다. 나머지 두 행은 각각 두 개의 행을 포함합니다.
행 조인과 관련된 참고 사항입니다. 개발 단계에서 표에테두리를 지정하세요. 이렇게 하면 조인이 실제로 원하는 대로 작동하는지 항상 직접 확인할 수 있습니다.
열의 셀을 행 단위로 조인
행 간격 속성을 사용하여 한 열에 있는 여러 셀을 조인할 수 있습니다. 그러면 해당 셀이 열 내의 여러 행에 걸쳐 확장됩니다. 다음은 다른 예시입니다:
<table border="1"> <tr> <th rowspan="2">색상</th> <td>파란색</td> </tr> <tr> <td>녹색</td> </tr> <tr> <th rowspan="2">크기</th> <td>1.70</td> </tr> <tr> <td>1.80</td> </tr> </table>
브라우저에서는 다음과 같이 표시됩니다:
행간 속성에 숫자 값이 할당됩니다. 이는 궁극적으로 셀이 확장되어야 하는 열 내의 행 수를 결정합니다. 물론 지정된 행 수는 실제로 정확해야 합니다.
행과 열의 셀을 동시에 조인하기
행 스팬과 열 스팬이라는 두 속성을 서로 결합할 수도 있습니다. 이를 통해 여러 행과 열에 동시에 걸쳐 있는 셀을 정의할 수 있습니다. 이 또한 예시를 통해 가장 잘 설명됩니다.
<table border="1"> <tr> <th colspan="2" rowspan="2">아파트</th> <td>5개의 방</td> </tr> <tr> <td>154평방미터</td> </tr> <tr> <td>샬로텐부르크</td> <td>주차 공간</td> <td>바닥 난방</td> </tr> </table>
브라우저에서 살펴보면 다음과 같은 결과를 얻을 수 있습니다:
두 속성을 결합할 때는 물론 마지막에 셀 수가 실제로 정확한지 확인하는 데에도 주의를 기울여야 합니다.
표에 레이블 지정하기
캡션 요소는 표를 더 쉽게 이해할 수 있는 매우 흥미로운 방법을 제공합니다. 표에 제목이나 범례를 추가하는 데 사용할 수 있기 때문입니다. 캡션의 콘텐츠는 표에 정의되어 있더라도 표 외부에 표시됩니다.
다음은 캡션의 일반적인 활용 예시입니다:
표 제목이 표 위에 표시됩니다. 기본적으로 캡션은 표 위 중앙에 표시됩니다. 물론 CSS를 사용하여 사용자 정의할 수 있습니다.캡션 요소는 도입부인 <표> 바로 뒤에 정의됩니다.
위에 표시된 예제의 전체 구문은 다음과 같습니다.
<표 테두리="1"> <캡션>미디어 데이터</캡션> <콜그룹><콜 /><콜 /><콜그룹> <thead> <tr> <th>테마</th> <th>통화</th> <th>Trend</th> </tr> <thead> <tfoot> <tr> <td colspan="3">2014년 6월 기준</td> </tr> <tfoot> <tbody> <tr> <td>HTML5</td> <td>12.245</td> <td>+</td> </tr> <tr> <td>CSS3</td> <td>12123</td> <td>+</td> </tr> <tr> <td>JavaScript</td> <td>11.546</td> <td>+</td> </tr> </tbody> </table>
테이블 디자인하기
이전 버전의 HTML에는 테이블을 스타일링하기 위한 수많은 속성이 있었습니다. 다음은 속성을 사용하여 제어할 수 있는 몇 가지 예시입니다. (물론 오늘날에도 브라우저는 이러한 속성을 지원합니다. 하지만 HTML5에서는 더 이상 사용하지 않아야 합니다.)
- 외부 프레임
- 내부 테이블 프레임
- 너비 및 높이 사양
- 그리드 선
- 셀 콘텐츠의 정렬
- 색상
- 배경 이미지
보시다시피 해당 HTML 속성을 통해 모든 것을 제어할 수 있습니다. 다음 예시는 이러한 옵션이 광범위하게 사용된 표를 보여줍니다:
<table border="1"> <tr> <td width="200" height="100" bgcolor="#999933">One</td> <td width="200" bgcolor="#00ffff">Two</td> <td width="200">Three</td> </tr> <tr bgcolor="#ff00ff"> <td height="100">Four</td> <td bgcolor="#996666">Five</td> <td bgcolor="#003333">Six</td> </tr> </table>
결과를 보면 원하는 결과가 나옵니다.
하지만 겉보기에는 그럴 듯해 보여도 기본 구문은 효과적이지 않습니다. CSS를 사용하여 테이블 속성을 제어하는 것이 좋습니다. 새로운 CSS 속성 덕분에 이전 속성을 최신 구문으로 대체 할 수있을뿐만 아니라 이전 속성을 최신 구문으로 대체 할 수 있습니다. 추가 기능도 구현할 수 있습니다. 예를 들어, 이제 표 행의 색상을 번갈아 가며 쉽게 지정할 수 있습니다.
이전 HTML 및 CSS 시대에는 이러한 결과를 얻기 위해 코드를 크게 변경해야 하는 경우가 있었습니다. 이제 CSS가 제공하는 가능성을 일관되게 활용하면 이를 매우 쉽게 구현할 수 있습니다.
tr:nth-child(even) { background-color: #fd9d5d; } tr:nth-child(odd) { background-color: #c0f390; } table { border-spacing: 0px; }
이미 여러 번 설명했듯이 이번 시리즈에서는 CSS에 대해 자세히 살펴보겠습니다.
