반응형
아래 예시와 같이 CSS 코드를 작성해보세요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/03_exam_table_box_1.css" />
</head>
<body>
<!-- border-collapse : collapse; (테이블의 안쪽 선붙이기 속성) -->
<h3>태풍 정보</h3>
<table>
<tr>
<th rowspan="2">일시</th>
<th colspan="2">중심위치</th>
<th rowspan="2">중심기압(hPa)</th>
<th colspan="2">최대풍속</th>
</tr>
<tr>
<td>위도</td>
<td>경도</td>
<td>초속(m/s)</td>
<td>시속(km/s)</td>
</tr>
</table>
</body>
</html>
/* 문제 풀이 */
/* 선택자들에게 공통된 속성 적용하기 */
/* 사용법 :
선택자, 선택자2, ... {
속성 : 값;
}
*/
table, tr, th, td {
/* 외곽선 : border : 선두께 선스타일 선색상 */
border: 1px solid black;
/* 테이블 선사이 간격 붙이기 속성 */
border-collapse: collapse;
/* 안쪽 여백(padding) */
padding: 8px;
}
반응형
'CSS > CSS 실습' 카테고리의 다른 글
| [CSS] display 실습 (0) | 2023.08.10 |
|---|---|
| [CSS] 웹 폰트 적용 예제 (0) | 2023.08.09 |
| [CSS] 테이블 스타일 적용 (0) | 2023.08.09 |
| [CSS] 배경이미지 연습문제 (0) | 2023.08.08 |
| [CSS] Box 연습문제 (0) | 2023.08.08 |