[CSS 기초강좌] 표(table) 꾸미기 > 테두리 만들기
홈페이지제작시 정말 중요한 부분이죠 테이블은 홈페이지에서
참으로 유용하게 여러곳에서 사용되기 때문에 정확히 숙지해야
할 부분입니다. 오늘은 CSS강좌 테이블 만들고 테두리색상을 넣는 것을
알아 보겠습니다.
테두리 만드는 속성
테두리는 border 속성으로 만듭니다.
table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
기본 모양
아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다.
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>우리나라</th><th>대한민국</th><th>사랑</th>
</tr>
</thead>
<tbody>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
</tbody>
</table>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 100%;
border: 1px solid #444444;
border-color:#F00
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>우리나라</th><th>대한민국</th><th>사랑</th>
</tr>
</thead>
<tbody>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
<tr>
<td>기독교</td><td>부흥한 </td><td>대한민국</td>
</tr>
</tbody>
</table>
</body>
</html>
'홈페이지제작 > CSS' 카테고리의 다른 글
| CSS 강좌 /선택자 / 전체 선택자(Universal Selector) (0) | 2018.02.05 |
|---|---|
| [CSS 강좌] 워드프레스 테마 만들기 (0) | 2018.01.29 |
| [CSS 강좌] 표(table) 과 배경색 꾸미기 (0) | 2018.01.10 |
| [CSS 기초강좌 ] 아이디 선택자(ID Selector) (0) | 2018.01.09 |
| [CSS 기초강좌] 선택자 > 클래스 선택자(Class Selector) (0) | 2018.01.08 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.