반응형
안녕하세요. HTML강사 코딩하는 고양이입니다.
오늘은 표 태그를 배워볼 거예요.
시작하기 전에 초기 설정을 해주세요.
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
</style>
</head>
<body>
</body>
</html>이것을 복사하세요.
1. 표 태그
표 태그의 종류는 아래 표에 있습니다.
| 설명 | |||
| <table> | 테이블 추가 | ||
| <caption> | 표의 제목 | ||
| <tr> | 행 삽입 | ||
| <td> | 열 삽입 | ||
형태는 아래 형태와 같습니다.
<table>
<caption>제목</caption>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</table>
예)
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<table>
<caption>코딩하는 고양이</caption>
<tr>
<td>HTML/CSS</td>
<td>C</td>
<td>JAVA</td>
</tr>
</table>
</body>
</html>결과)
그런데 모양이 표처럼 보이지 않죠...
그건 CSS로 표를 디자인할 수가 있습니다.
예)
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
table{
width: 400px; /*표의 가로길이*/
height: 200px; /*표의 세로길이*/
border: 2px solid black; /*테두리 두께, 테두리 색*/
}
caption{
background-color: gray;
border-top: 2px solid black; /*위의 테두리 두께, 테두리 색*/
border-left: 2px solid black; /*왼쪽의 테두리 두께, 테두리 색*/
border-right: 2px solid black; /*오른쪽의 테두리 두께, 테두리 색*/
}
tr{
background-color: lightgray;
}
td{
border: 1px solid black;
text-align: center; /*내용을 중앙에 표시한다*/
}
</style>
</head>
<body>
<table>
<caption>코딩하는 고양이</caption>
<tr>
<td>HTML/CSS</td>
<td>C</td>
<td>JAVA</td>
</tr>
</table>
</body>
</html>결과)
CSS를 사용하니 이젠 표처럼 보이죠 ㅎㅎ
이것을 응용해서 한번 나만의 표를 만들어보세요.
오늘의 문제!
1번 문제
3개의 행과 2개의 열이 있는 표를 오늘 배운 표 태그로 만드세요.
2번 문제 (CSS)
아래 있는 속성을 이용해 나만의 표를 디자인해 보세요
border-top (위쪽 테두리)
border-left (왼쪽 테두리)
border-right (오른쪽 테두리)
border-bottom (아래쪽 테두리)
text-align: center; (글씨를 중앙으로 위치)
background-color
width
heght
1번 모범답안
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
<table>
<caption>제목</caption>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</table>
</body>
</html>
2번 모범답안
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
table{
width: 400px; /*표의 가로길이*/
height: 200px; /*표의 세로길이*/
border: 2px solid black; /*테두리 두께, 테두리 색*/
}
caption{
background-color: gray;
border-top: 2px solid black; /*위의 테두리 두께, 테두리 색*/
border-left: 2px solid black; /*왼쪽의 테두리 두께, 테두리 색*/
border-right: 2px solid black; /*오른쪽의 테두리 두께, 테두리 색*/
}
tr{
background-color: lightgray;
}
td{
border: 1px solid black;
text-align: center; /*내용을 중앙에 표시한다*/
}
</style>
</head>
<body>
<table>
<caption>제목</caption>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</table>
</body>
</html>
오늘은 여기까지 ㅂㅂ
반응형
'HTML, CSS > 이론' 카테고리의 다른 글
| [HTML/CSS] 7. 기타 CSS 속성 (0) | 2023.03.25 |
|---|---|
| [HTML/CSS] 6. CSS의 필수 속성 (1) | 2023.03.24 |
| [HTML/CSS] 4. CSS의 기초 (1) | 2023.03.22 |
| [HTML] 3. 이미지 태그와 링크 태그 (2) | 2023.03.21 |
| [HTML] 2. 목록 태그와 설명 태그 (1) | 2023.03.20 |