HTML / Tutorial / 표(table)
표 만들 때 사용하는 태그
- 표는 table 태그로 만듭니다.
- 행은 tr 태그로 만듭니다.
- 열의 제목이 들어가는 셀은 th 태그로 만듭니다.
- 내용이 들어가는 셀은 td 태그로 만듭니다.
- 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다.
- 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다.
- 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다.
- 표 제목은 caption 태그로 만듭니다.
예제
위의 태그를 전부 사용한 간단한 예제입니다. 정렬이나 셀 합침의 결과를 명확히 나타내기 위해 CSS로 표의 폭을 정하고 테두리를 만들었습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<table>
<caption>Lorem</caption>
<thead>
<tr>
<th></th>
<th>Ipsum</th>
<th>Ipsum</th>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td rowspan="2">Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
</tr>
<tr>
<th>Ipsum</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Foot</td>
</tr>
</tfoot>
</table>
</body>
</html>
제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.
순서 있는 목록(Ordered List)은 차례대로 증가하는 번호가 붙는 목록입니다. 순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙습니다. 정의 목록(Definition List)은 용어와 그 뜻을 나열할 때 사용합니다.
표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있습니다.
HTML / Tutorial / 양식에 안내 문구 추가하는 방법
input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. 만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.
기본 문법 가장 기본적인 문법은 다음과 같습니다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 합니다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어 다음은 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem입니다. <p>Lorem</p> 속성 태그는 속성(attribute)을 가질 수 있다습니다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 합니다. <blockquote ...
링크(link)는 a 태그로 만듭니다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다. href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣습니다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리됩니다.