table 만드는 법
table row (tr) & table data (td)
table이란 HTML으로 행과 열을 가진 표를 만드는 것으로 볼 수 있다. 기본 태그는 <table>로 시작해 클로징 태그인 </table>가 필요하다. table 태그 안에<tr></tr>(table row) 태그를 활용해 행을 구별한다. 또한 그 안에 <td></td>(table data) 태그를 사용하여 해당 칸에 넣을 텍스트를 작성할 수 있다.
<table>
<tr>
<td>1 행 1 칸</td>
<td>1 행 2 칸</td>
<td>1 행 3 칸</td>
</tr>
<tr>
<td>2 행 1 칸</td>
<td>2 행 2 칸</td>
<td>2 행 3 칸</td>
</tr>
</table>
table heading (td)
table 태그는 default 값이 정해져 있지만 만약 해당 칸을 heading으로 만들어 굵은 글씨로 만들고 싶다면 <th>(table heading) 태그를 사용하면 된다. (<tr>, <td>과 같이 클로징 태그가 필요하다) 그러나 css에서 font-weight 속성에 bold 같은 값을 주면 원하는 만큼 굵거나 얇은 형태를 만들 수 있다.
table 스타일
1. border
<style>
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
</style>
위의 코드는 table에 아무런 값을 주지 않았을 경우 기본값으로 css의 default 이다. border-collapse는 separate와 collapse가 있는데 separate는 테두리의 경계가 분리 되어 있다는 뜻이다. 그리고 앞선 table처럼 테두리를 생성하기 위해서는 border에 1px solid black을 줘야 한다.
<style>
table, tr, td {
/*display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;*/
border: 1px solid black;
}
</style>
table에 border 값을 이용해 스타일을 줬지만 예상과 다르게 테두리가 단선이 아닌 2줄이 되어 버렸다. 그 이유는 css default 값 때문인데 단선으로 바꾸는 두 가지 방법이 있다. 첫 번째는 border-collapse 값을 collapse으로 바꾸는 것이고, 두 번째 방법은 border-spacing을 0으로 바꾸는 것이다.
border-collapse을 이용한 방법
<style>
table, tr, td {
/*display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;*/
border: 1px solid black;
border-collapse: collapse;
}
</style>
border-collapse의 separate는 각 요소의 테두리가 서로 분리되어 있다는 의미이다. 그래서 border에 스타일을 주더라도 단선이 아닌 각각의 테두리가 형성되어 두 줄로 보이게 된다. 그러나 대신 collapse의 값을 주게 되면 각 요소의 border가 상쇄 되어 서로 연결된 것처럼 형성되어 단선처럼 보이게 된다.
border-spacing을 이용한 방법
<style>
table, tr, td {
/*display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;*/
border: 1px solid black;
border-spacing: 0px;
}
</style>
border-spacing은 border끼리의 공간의 크기를 설정해 주는 속성이다. 기본 값이 2px이었기 때문에 테두리 사이의 공간이 2px씩 형성되었다. 이를 없애기 위해서는 값을 0px로 변경하면 된다.
그러나 첫 번째 방법과는 다르게 단선이 되었더라도 2개의 테두리가 겹쳐 굵기가 1px이 아닌 2px이 되어 더 굵어 보인다. 이 경우, border-collapse의 값을 다시 collapse로 변경하면 된다. 반드시 각 요소마다 테두리가 필요하지 않는 경우라면 두 번째 방법 보다는 border-collapse 속성을 이용해 바꾸는 것을 추천한다.
2. text-align
<style>
table, td, tr {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 300px;
height: 150px;
}
td, tr {
text-align: left;
/* vertical-align: top; */
}
</style>
text-align은 텍스트의 수평 정렬 방법을 설정하는 속성으로 center, right(오른쪽 정렬), left(왼쪽 정렬), justify(양쪽 정렬), initial(기본값 정렬), inherit(부모 요소에 상속 정렬) 이 있다. text-align 는 블럭 요소에만 적용 가능하지만 table에 크기를 설정하고 tr, td에 text-align을 설정하면 수평 정렬이 적용된다.
3. vertical-align
<style>
table, td, tr {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 300px;
height: 150px;
}
td, tr {
text-align: center;
vertical-align: top;
}
</style>
vertical-align 은 수직정렬을 위한 방법으로 top, bottom, or middle 등의 속성들이 존재한다. 위의 예시는 top을 준 경우이다.
table 행, 열 병합
<html>
<head>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">Develope Plan</th>
</tr>
<tr>
<td rowspan="2">Project 1</td>
<td>James</td>
<td>Client</td>
<td rowspan="2">Due to: October 30th</td>
</tr>
<tr>
<td>Emma</td>
<td>Server</td>
</tr>
<tr>
<td>Project 2</td>
<td>Mike</td>
<td>Fullstack</td>
<td>Due to: November 2nd</td>
</tr>
</table>
</body>
table을 만들다 보면 실제로 행과 열이 항상 일정할 수 없다. 그렇기에 행이나 열을 병합하여 table의 형태를 자유 자재로 변경하기 위해서는 rowspan 혹은 colspan 속성을 통해 행이나 열을 병합하는 것이 가능하다. 속성 값에는 몇 개의 행이나 열이 병합할 건지를 설정할 수 있다.
위의 예시에서는 제목 부분의 열이 4개가 병합하기 위해 colspan="4" 설정했고, project1 행은 2개의 행이 병합 되기 위해 rowspan="2" 값이 설정되었다.
