오늘은 html과 css를 이용해서 테이블을 만들어보겠습니다.
<table>
<tr>
<th>셀 제목1</th>
<th>셀 제목2</th>
<th>셀 제목3</th>
</tr>
<tr>
<td>셀 내용1</td>
<td>셀 내용1</td>
<td>셀 내용1</td>
</tr>
<tr>
<td>셀 내용2</td>
<td>셀 내용2</td>
<td>셀 내용2</td>
</tr> <tr>
<td>셀 내용3</td>
<td>셀 내용3</td>
<td>셀 내용3</td>
</tr>
</table><table> 태그와 <tr>, <th>, <td> 태그를 이용해서 테이블을 만들었습니다.
| <tr> | 하나의 행 |
| <th> | 테이블 각 열의 제목 |
| <td> | 각각의 셀 |
결과 화면입니다.
아직 <table>로 글만 썼기에 글자만 나옵니다.
이제 css를 이용해서 테이블 테두리를 만들어보겠습니다.
css는 스타일시트이며 body부분을 꾸며주는 역할을 합니다.
<head></head> 사이에 <style></style>을 넣어 씁니다.
<style>
table, tr, th, td {
border:1px solid black;
}
</style><style> 안에 꾸며줄 table, tr, th, td 태그를 작성하고
border:1px solid black; 을 써줍니다.
border은 테두리를 만들어주며 1px(선 굵기)로 solid(실선) black(선 색깔)을 써주었습니다.
실행 결과입니다.
이상하게 이중선이 생겼습니다. 이유는 표(table) 테두리와 셀(td) 테두리 사이의 간격이 있기 때문입니다.
표 테두리와 셀 테두리 사이의 간격을 어떻게 처리할 것인지 필요한 속성이 border-collapse 입니다.
| border-collapse | collapse (표 테두리와 셀 테두리 사이의 간격을 없앤다, 겹치는 선은 한 줄로 나타낸다.) |
| separate (표 테두리와 셀 테두리 사이에 간격을 둔다.) | |
| initial (기본값을 설정한다 | |
| inherit (부모 요소의 속성값을 상속받는다.) |
테두리 사이의 간격을 없애기 위해 collapse을 쓰겠습니다.
<style>
table, tr, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
실행 결과입니다.
테두리 사이의 간격을 없애 단선이 되었습니다.
'웹개발 > HTML+CSS' 카테고리의 다른 글
| [HTML+CSS] margin, padding 속성 비교 (0) | 2021.09.24 |
|---|---|
| HTML 레이아웃 구조 만들기(웹디자인기능사 실기 예시) (0) | 2021.09.13 |
| HTML 폼양식, <input>, <select>, <textarea>, <button> (0) | 2021.09.11 |
| HTML 하이퍼링크 삽입, <a> 태그 속성 (0) | 2021.09.08 |
| HTML 이미지 삽입하기, <img> 속성 (width, height, src, alt, title) (0) | 2021.09.07 |
