들어가기 전에

테이블 태그로 만들어야 하는 대표적인 UI로 달력을 꼽을 수 있습니다.

월요일부터 금요일까지 상단 부분이 제목 셀이고, 그 외 날짜 부분이 내용 셀로 이루어져 있기 때문입니다. 

기념일, 휴일, 음력 등 표시해야할 컨텐츠가 많기 때문에, 셀 안에 DIV 요소를 추가하여 실습을 진행하도록 하겠습니다.

제작하기

HTML 실습

<table>
<caption>달력</caption>
<thead>
<tr>
	<th scope="col">월</th>
	<th scope="col">화</th>
	<th scope="col">수</th>
	<th scope="col">목</th>
	<th scope="col">금</th>
	<th scope="col">토</th>
	<th scope="col">일</th>
</tr>
</thead>
<tbody>
<tr>
	<td>
		<div class="inner">
			<span class="date">30</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">1</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">2</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">3</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">4</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">5</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">6</span>
		</div>
	</td>
</tr>
<tr>
	<td>
		<div class="inner">
			<span class="date">7</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">8</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">9</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">10</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">11</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">12</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">13</span>
		</div>
	</td>
</tr>
</tbody>
</table>

저번 실습에서 진행한 것 처럼 접근성을 위한 scope 속성을 추가하여 기본적인 테이블 모양을 만들어 줍니다. 다만 각 셀의 가로 너비가 균일하기 때문에, colgroup과 col 태그는 추가하지 않아도 됩니다.

달력에는 꾸미는 요소들이 많기 때문에 td 셀 안에 inner 라는 클래스를 가진 DIV를 미리 추가해 주시길 바랍니다.

<table>
<caption>달력</caption>
<thead>
<tr>
	<th scope="col">일</th>
	<th scope="col">월</th>
	<th scope="col">화</th>
	<th scope="col">수</th>
	<th scope="col">목</th>
	<th scope="col">금</th>
	<th scope="col">토</th>
</tr>
</thead>
<tbody>
<tr>
	<td>
		<div class="inner">
			<span class="date dimmed">30</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">1</span>
			<em class="text anniversary">국군의 날국군의 날국군의 날국군의 날</em>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">2</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">3</span>
			<em class="text holiday">개천절</em>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">4</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">5</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">6</span>
		</div>
	</td>
</tr>
<tr>
	<td>
		<div class="inner">
			<span class="date holiday">7</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">8</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">9</span>
			<em class="text holiday">한글날</em>
			<span class="lunar">음 9.1
		</span></div>
	</td>
	<td class="today">
		<div class="inner">
			<span class="date">10</span>
			<strong class="blind">오늘</strong>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">11</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">12</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">13</span>
		</div>
	</td>
</tr>
<tr>
	<td>
		<div class="inner">
			<span class="date holiday">7</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">8</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date holiday">9</span>
			<em class="text holiday">한글날</em>
			<span class="lunar">음 9.1</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">10</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">11</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">12</span>
		</div>
	</td>
	<td>
		<div class="inner">
			<span class="date">13</span>
		</div>
	</td>
</tr>
</tbody>
</table>

요소들을 하나씩 추가하여 달력을 완성합니다. 공통으로 처리해야할 부분과 분기 처리가 필요한 부분에 대해 고민해보고, 적절하게 클래스를 사용합니다. 

CSS 실습

table, th {
	border: 1px solid #eaedef;
	border-collapse: collapse;
}

td {
	border-top: 1px solid #eaedef;
	border-left: 1px solid #eaedef;
}


table {
	width: 590px;
	table-layout: fixed;
	font-size: 12px;
}

th {
	height: 25px;
	color: #777;
}

.inner {
	position: relative;
	height: 70px;
	padding: 5px;
}

.date {
	font-weight: bold;
}

.text {
	display: block;
	margin-top: 3px;
	font-style: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.date.dimmed {
	color: #e7e7e7;
}

.date.holiday {
	color: #f44e4e;
}

.text.holiday {
	color: #f44e4e;
}

.text.anniversary {
	color: #00c;
}

.lunar {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 11px;
	color: #bababa;
}

.today {
	border: 1px solid #e0e0bf;
	background: #ffffd9;
}

요약 정리

어떤 UI 인지에 따라 테이블 태그의 기본 스타일을 이용할 수도 있어야 합니다. 무조건 vertical-align: top; 으로 정렬할 필요도 없으며, border를 각 셀에 줄 필요도 없습니다. 스스로 판단하기에 가장 적합한 방법을 찾으면 됩니다.

다만 셀 안에 DIV를 추가하여 요소를 꾸며준다는 점을 꼭 기억하시길 바랍니다.

참고 링크