표만들기 기본 태그
- <table> </table> 테이블 구성
- <tr> </tr> 행 만들기
- <td>테이블 셀의 내용</td> 열 만들기
예시>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
HTML의 테이블은 행과 열 내부의 테이블 셀로 구성된다.
셀의 내용에는
텍스트, 이미지, 목록, 링크, 기타 표 등 모든 종류의 HTML 요소가 포함될 수 있다.
기본적인 태그를 사용하여 완성하면
우리가 아는 일직선의 표가 아닌 예시처럼 이중으로 테두리가 둘러진 표가 나타난다.
표의 테두리는 border에 CSS의 속성을 사용해서 바꿀 수 있다.
표의 테두리 일직선으로 바꾸는 방법(CSS 사용)
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
- 속성 borther
border: 1px solid black; 굵기, 선모양, 색상 순으로 작성
선 모양 속성값
solid 실선
dotted 점선
dashed 파선
색상
기본설정 검정색
- 속성 border-collapse
테두리 만들기
속성값
separate 테두리와 셀 사이의 간격주기(기본값)
collapse 테두리와 셀 사이의 간격을 없애고, 한 줄로 나타낸다.
- 속성 backgroung-color: 색상;
table에 설정 시 전체 색상 지정
th에 설정 시 th만 색상 지정
td에 설정 시 th만 색상 지정
* th, td 의 셀 색을 따로 지정하게 되면 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>표 스타일링</title>
<!--요소에 스타일 넣기-->
<style>
table {
width: 100%;
background-color: rgb(228, 220, 243);
}
table,/*테두리만 쳐짐*/ th, td {
border: 1px solid rgb(206, 80, 157);
border-collapse: collapse;/*테두리 한줄*/
}
th {
background-color: blueviolet;
height: 80px;
}
td {
background-color: aliceblue;
}
.r1 {
background-color: rgb(65, 231, 231);
}
.r2 {
color: salmon;
}
</style>
</head>
<body>
<table>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td class="r1">1행 1열</td>
<td class="r2">1행 2열</td>
</tr>
<tr>
<td class="r1 r2">2행 1열</td>
<td class="r2" style="background-color: lightskyblue;">2행 2열</td>
</tr>
</table>
</body>
</html>'Front-End > HTML' 카테고리의 다른 글
| HTML 태그 - Lists (0) | 2023.02.14 |
|---|---|
| HTML 태그- table 2 (0) | 2023.02.14 |
| HTML - Favicon이란? (0) | 2023.02.08 |
| HTML 태그 - 서식에 사용되는 태그들 (0) | 2023.02.06 |
| HTML 요소 - inline-element, block-element (0) | 2023.02.05 |
