<table>, <tr>, <th>, <td> 사용해보기

데이터만 주줄이 나열되면 가독성이 떨어지고 볼품 없어 보인다.

표형식으로 깔끔하게 정리해서 보이도록 <table> 태그를 사용한다.

우리가 평소 쓰는 표가 <table>이라고 보면 된다. 대신 줄과 칸을 입력하려면 수작업이 요구된다.

<tr>은 표에서 "줄"역할을 한다. 첫번째 줄에 캐릭터 이름이 들어간 것이다.

<th>는 해당 줄의 "데이터 제목"에 해당한다. 강조 효과를 주기 위해 bold 처리가 된다.

<td>는 "칸"역할로 데이터가 표시된다.

<table class="table">
<tr>
  <th>캐릭터 이름</th>
  <td>{{ user.character.name }}</td>
</tr>
<tr>
  <th>주특기</th>
  <td>{{ user.character.type }}</td>
</tr>
<tr>
  <th>캐릭터 성별</th>
  <td>{{ user.character.gender }}</td>
</tr>
</table>

완성된 형태는 아래와 같다

캐릭터 이름	길거리파이터
주특기	태권도
캐릭터 성별	여자

연습삼아 하나 더 만들어보자.

<table class="table">
<tr>
  <th>캐릭터 이름</th>
  <th>주특기</th>  
  <th>캐릭터 성별</th>
</tr>
<tr>
  <td>{{ user.character.name }}</td>  
  <td>{{ user.character.type }}</td>
  <td>{{ user.character.gender }}</td>
</tr>
</table>

다음 테이블은 아래와 같다

캐릭터 이름	주특기	캐릭터 성별
길거리파이터	태권도	여자