728x90
반응형
SMALL
1. 테이블
- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
- <table>로 시작하고</table> 끝냄
- <tr>로 행을 생성, <td>로 셀을 생성
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
</table>- <th>: 셀의 제목, 가운데 정렬, 굵은 글씨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기1</title>
<style>
table {width: 600px; border: 1px solid blueviolet;}
td { border: 1px solid palevioletred;}
th { border: 1px solid palegreen;}
</style>
<table>
<tr>
<th>첫번째 셀</th> <!--셀의 제목-->
<th>두번째 셀</th> <!--셀의 제목-->
</tr>
<tr>
<td>세번째 셀</td>
<td>네번째 셀</td>
</tr>
<tr>
<td>다섯번째 셀</td>
<td>여섯번째 셀</td>
</tr>
</table>
2. 테이블 꾸미기
2-1. colspan
- 셀을 가로로 합침
<td colspan='합칠 열의 개수'>
<table>
<tr>
<th>첫번째 셀</th>
<th>두번째 셀</th>
</tr>
<tr>
<td colspan="2">세번째 셀</td> <!-- 2개의 열을 합침-->
</tr>
<tr>
<td>다섯번째 셀</td>
<td>여섯번째 셀</td>
</tr>
</table>
2-2. rowspan
- 셀을 세로로 합침
<td rowspan='합칠 행의 개수'><table>
<tr>
<th>첫번째 셀</th>
<th>두번째 셀</th>
</tr>
<tr>
<td rowspan="2">세번째 셀</td>
<td>네번째 셀</td>
</tr>
<tr>
<td>여섯번째 셀</td>
</tr>
</table>
2-3. colgroup
- colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style = 'css문법1'>
<col style = 'css문법2'>
<col style = 'css문법3'>
</colgroup>
<tr>
<td>1</td> <!-- css문법1 적용-->
<td>2</td> <!-- css문법2 적용-->
<td>3</td> <!-- css문법3 적용-->
<tr>
<tr>
<td>1</td> <!-- css문법1 적용-->
<td>2</td> <!-- css문법2 적용-->
<td>3</td> <!-- css문법3 적용-->
<tr>
</table>
2-4. caption
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기2</title>
<style>
table{
width: 600px;
border: 1px solid black;
}
th{
border: 1px solid black;
}
td{
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>테이블 만들기2</h2>
<table>
<caption>
<p><b>KDT 수강생 리스트</b></p>
</caption>
2-5. 테이블 테두리, 셀의 테두리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기1</title>
</head>
<body>
<h2>테이블 만들기1</h2>
<table>
<tr>
<td>첫번째 셀</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>첫번째 셀</td>
<td>두번째 셀</td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기1</title>
<style>
table {width: 600px; border: 1px solid blueviolet;}
td { border: 1px solid palevioletred;}
</style>
</head>
<body>
<h2>테이블 만들기1</h2>
<table>
<tr>
<td>첫번째 셀</td>
</tr>
</table>
2-6. 셀 채우기
- <colgroup> </colgrop>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기2</title>
<style>
table{
width: 600px;
border: 1px solid black;
}
th{
border: 1px solid black;
}
td{
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>테이블 만들기2</h2>
<table>
<caption>
<p><b>KDT 수강생 리스트</b></p>
</caption>
<colgroup>
<col style="width: 100px; background-color: beige;">
<col style="width: 200px; background-color: pink;">
<col style="width: 300px; background-color: skyblue;">
</colgroup>
<tr>
<th>이름</th>
<th>연락처</th>
<th>주소</th>
</tr>
<tr>
<td>김사과</td>
<td>010-1111-1111</td>
<td>서울시 서초구 양재동</td>
</tr>
<tr>
<td>반하나</td>
<td>010-2222-2222</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>오렌지</td>
<td>010-3333-3333</td>
<td>서울시 동작구 사당동</td>
</tr>
</table>
</body>
</html>
📄 예제 HTML
728x90
반응형
LIST
'Web > HTML' 카테고리의 다른 글
| [HTML] form 태그와 여러가지 태그 - input, label, textarea, button (0) | 2023.03.27 |
|---|---|
| [HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기 (0) | 2023.03.27 |
| [HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 (0) | 2023.03.27 |
| [HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! (0) | 2023.03.24 |
| [HTML] HTML의 태그 종류에 대해 알아보자🧐 (0) | 2023.03.24 |
