-
CSS 표만들기 및 테두리 꾸미는 방법Dung--[CSS HTML] 2023. 4. 25. 16:42
CSS 표만들기 및 테두리 꾸미는 방법
1. CSS 테두리 만드는 속성
테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다.
2. 기본모양
아무런 꾸미기를 하지 않았다면 기본 모양은 테두리가 없는것입니다. th 요소는 보통 굵은 글씨에 정렬이 기본적인 모양입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Lorem</th><th>Ipsum</th><th>Merlot</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Merlot</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Merlot</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Merlot</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Merlot</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Merlot</td>
</tr>
</tbody>
</table>
</body>
</html>Lorem Ipsum Merlot
Lorem
Lorem
Lorem
Lorem
Lorem
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Merlot
Merlot
Merlot
Merlot
Merlot3. 표에 테두리 만들기
table 요소에 테두리를 만들게되면 표 외각에 테두리가 생깁니다.
<style>
table {
width: 100%;
border: 1px solid #444444;
}
</style>Lorem Ipsum Merlot
Lorem Ipsum Merlot
Lorem Ipsum Merlot
Lorem Ipsum Merlot
Lorem Ipsum Merlot
Lorem Ipsum Merlot4. 셀에 테두리 만들기
th,td 요소에 테두리를 만들면 각 셀에 테두리가 생기게 됩니다.
<style>
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
}
</style>Lorem Ipsum Merlot Lorem Ipsum Merlot Lorem Ipsum Merlot Lorem Ipsum Merlot Lorem Ipsum Merlot Lorem Ipsum Merlot ※ border-collapse은 테두리의 속성입니다.
테두리와 내용 사이의 간격은 padding 속성으로 정합니다.
<style>
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
padding: 10px;
}
</style>Lorem Ipsum Merlot
LoremIpsum Merlot
LoremIpsum Merlot
LoremIpsum Merlot
LoremIpsum Merlot
LoremIpsum Merlot 5. 가로선만 있는 표를 만드는방법
세로선 없이 가로선만 만들때의 방법
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
}
</style>
적용사례 6. 양끝에만 선이 없는 표를 만드는 방법
왼쪽과 오른쪽 양 끝에 선이 없는 표를 만드는 방법은 아래와 같습니다.
<style>
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
border-left: 1px solid #444444;
padding: 10px;
}
th:first-child, td:first-child {
border-left: none;
}
</style>
양끝에만 선이 없는 표 예시 CSS 표꾸미기, 정렬하는 방법
CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목
dsmotion.tistory.com
CSS 테이블 꾸미기, 표 크기 설정하는 방법
CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도
dsmotion.tistory.com
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS 테이블 꾸미기, 표 크기 설정하는 방법 (2) 2023.04.25 CSS 표꾸미기, 정렬하는 방법 (1) 2023.04.25 CSS 글씨 컬러 변경하는 방법 (0) 2023.04.17 CSS 글자(폰트) 크기를 설정하는 방법 (0) 2023.04.17 CSS 글자간격,줄간격 설정하는 방법 (4) 2023.04.17