이번에는 본문 자리에 css로 테이블을 꾸며 볼거야.
테이블은 웹사이트에서 가장 많이 사용되는 태그 중의 하나인데, 주로 게시물 목록을 보여 주는데 가장 많이 사용해.

요기보드를 포함한 게시판형 웹사이트들은 데이터베이스에 저장한 회원의 목록이나, 게시글들은 이 테이블 형식으로 출력해서 보여 주는 것이 일반적이야.

학습으로 우리는 아래와 같은 형태의 테이블을 본문란에 표시해 보려고 해.
단순한 테이블이지만 직접 만들기는 결코 쉽지 않은 형태야.
라인을 구분하기 좋게 한 줄 건너 배경색을 깔고, 마우스가 올라간 라인은 더 진하게 표시하는 기능을 구현 하려고 해.

		<table class="w3-table w3-border w3-striped w3-hoverable">
		  <thead>
			<tr class="w3-gray"><th width=100px>날짜</th><th>제 목</th><th width=100px>작성자</th><th width=50px>조회</th></tr>
		  </thead>
		  <tbody>
			<tr>
				<td>21-10-08</td>
				<td><a href="#">가입했습니다.</a></td>
				<td>홍길동</td><td>1</td>
			</tr>
			<tr>
				<td>21-10-07</td>
				<td><a href="#">안녕하세요.</a></td>
				<td>임꺽정</td><td>2</td>
			</tr>
			<tr>
				<td>21-10-06</td>
				<td><a href="#">반갑습니다</a></td>
				<td>황진이</td><td>3</td>
			</tr>
			<tr>
				<td>21-10-05</td>
				<td><a href="#">오픈했네요?</a></td>
				<td>어우동</td><td>4</td>
			</tr>
		  </tbody>
		</table>

위 소스를 바로 [다단페이지(Grid)] 에서 설명한 구조의 본문 자리에 넣으려면 [<p>폰12칸, 태블릿8칸 ,PC 9칸</p>] 자리에 대신 넣으면 화면 우측의 본문 자리에 들어가겠지?

▶ w3-table   w3-border   w3-striped   w3-hoverable

w3-table 클래스는 가장 기본적인 알몸(?) 형태의 테이블로 보여줘.
여기에 테두리를 두르고( w3-border ), 보기 좋게 한 줄 건너 배경을 깔고( w3-striped ), 마우스가 올라간 라인은 더 돋보이게( w3-hoverable ) 하는 효과를 추가했어.

또 w3-table-all 이라는 클래스도 있어.
이것은 w3-table, w3-border, w3-striped 3가지 클래스를 모두 합친 효과와 같은 역할을 해.
테이블에서는 이 3가지 클래스 조합을 많이 사용해서 아예 별도 이름으로 만들어 둔 클래스야.
그러므로 위 table 선언부는 아래와 같이 써도 동일해.

	<table class="w3-table-all w3-hoverable">

테이블은 사용 용도는 많은데 설명은 의외로 간단하네?
더 궁금한 점은 위 테이블 링크를 참조해 보도록 해.

위와 같이 테이블까지 모두 적용한 후의 화면은 아래와 같아.
http://yogibbs.kr/w3cssDemo/w3table.html