CSS · HTML
HTML 테이블
혜원21
2019. 10. 15. 03:31
*
티스토리를 하면서 테이블 구조는 사용한 적이 별로 없다. 메이플 정리 할 때나 한 번씩 쓰는데 티스토리 테이블 기능은 너무 미숙해서 별로다. 테이블 기능은 네이버 글 쓰기를 많이 배워야 할 듯하다. 여튼...
테이블 태그는 생각보다 배워야 할게 많다. 정리한 이미지 한 장으로 끝내보자.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid gray; padding: 10px;">
<h2>찾아라 드래공본</h2>
<p>오공의 아내 찌찌는 계왕신보다 위대한데...</p>
<table style="width: 100%;">
<caption>눈누난나</caption>
<tr>
<th>이름</th>
<th>성별</th>
<th>나이</th>
<th>비고</th>
</tr>
<tr>
<td>손오공</td>
<td>남자</td>
<td colspan="2">5살-철이 너무 없다.</td>
</tr>
<tr>
<td>손오천</td>
<td>남자</td>
<td colspan="2">10살-오공보다 철이 들었다.</td>
</tr>
<tr>
<td rowspan="2">손오천</td>
<td>남자</td>
<td>20살-오반보다 철이 들었다.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
이 시국에 일본 만화를 들먹여? 아니요. 드래곤볼은 이미 일본을 벗어나 저의 추억입니다.
저의 추억에는 국적이 없습니다. ㅅㄱㅇ
찾아라 드래공본
오공의 아내 찌찌는 계왕신보다 위대한데...
| 이름 | 성별 | 나이 | 비고 |
|---|---|---|---|
| 손오공 | 남자 | 5살-철이 너무 없다. | |
| 손오천 | 남자 | 10살-오공보다 철이 들었다. | |
| 손오천 | 남자 | 20살-오반보다 철이 들었다. | |
스킨에 따라 표 모양이 달리 보일 수 있습니다.
잘 이해하고 넘어간다. 정리 한번 하는 게 이리 중요하다. th, td니 뭐니 정말 헷갈렸는데 시원하게 이해하고 간다.