【CSS/table】Creating table with div(div로 테이블 만들기) #1

1. Description

display: table, display: table-row, display: table-cell을 이용하여 테이블을 만든다.

---

2. Example (1) : 기본 테이블

다음은 가장 기본적인 2 x 2형태의 테이블이다(테이블의 border조차 보이지 않는다).

._1q74-ex-1 {
}
._1q74-ex-1 .table {
	display: table;
	background: #022F04;
	width: 200px;
	height: 200px;
}
._1q74-ex-1 .row {
	display: table-row;
}
._1q74-ex-1 .cell {
	display: table-cell;
	background: #196F1D;
}

1-1

1-2

2-1

2-2

---

3. File (1)

[css][div][table]normal(2x2).html

0.00MB

 

---

4. Example (2) : 테이블 border효과 내기

display: table속성에 border-collapse, border-spacing을 추가하여 테이블의 border처럼 보이게 할 수 있다.

._1q74-ex-2 {
}
._1q74-ex-2 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-2 .row {
	display: table-row;
}
._1q74-ex-2 .cell {
	display: table-cell;
	background: #41EA49;
}

1-1

1-2

2-1

2-2

---

5. File (2)

[css][div][table]normal(2x2)-border.html

0.00MB

---

6. Example (3) : 컬럼 그룹으로 나누기

table-column-group, table-column 속성값으로 컬럼 그룹을 나눌 수 있다.

예제에서는 컬럼의 넓이를 4:6 비율로 나누었다.

._1q74-ex-3 {
}
._1q74-ex-3 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-3 .table-column-group {
	display: table-column-group;
}
._1q74-ex-3 .table-column {
	display: table-column;
}
._1q74-ex-3 .table-column:nth-child(1) {
	width: 40%;
}
._1q74-ex-3 .table-column:nth-child(2) {
	width: 60%;
}
._1q74-ex-3 .row {
	display: table-row;
}
._1q74-ex-3 .cell {
	display: table-cell;
	background: #41EA49;
}

Column-1

Column-2

1-1

1-2

2-1

2-2

---

7. File (3)

[css][div][table]normal(2x2)-column-group.html

0.00MB

---

8. Example (4) : 컬럼 헤더 추가하기

table-header-group 속성값으로 컬럼 헤더를 넣을 수 있다.

._1q74-ex-4 {
}
._1q74-ex-4 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-4 .column-group {
	display: table-column-group;
}
._1q74-ex-4 .column {
	display: table-column;
}
._1q74-ex-4 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-4 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-4 .header-group {
	display: table-header-group;
}
._1q74-ex-4 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-4 .row {
	display: table-row;
}
._1q74-ex-4 .cell {
	display: table-cell;
	background: #41EA49;
}

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

---

9. File (4)

[css][div][table]normal(2x2)-column-header.html

0.00MB

---

10. Example (5) : 컬럼 바디 추가하기

table-row-group 속성값으로 컬럼 바디를 추가할 수 있다.

._1q74-ex-5 {
}
._1q74-ex-5 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-5 .column-group {
	display: table-column-group;
}
._1q74-ex-5 .column {
	display: table-column;
}
._1q74-ex-5 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-5 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-5 .header-group {
	display: table-header-group;
}
._1q74-ex-5 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-5 .row-group {
	display: table-row-group;
}
._1q74-ex-5 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-5 .row {
	display: table-row;
}
._1q74-ex-5 .cell {
	display: table-cell;
	background: #41EA49;
}

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

---

11. File (5)

[css][div][table]normal(2x2)-column-body.html

0.00MB

---

12. Example (6) : 컬럼 푸터 넣기

table-footer-group 속성값으로 컬럼 푸터를 넣을 수 있다.

._1q74-ex-6 {
}
._1q74-ex-6 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-6 .column-group {
	display: table-column-group;
}
._1q74-ex-6 .column {
	display: table-column;
}
._1q74-ex-6 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-6 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-6 .header-group {
	display: table-header-group;
}
._1q74-ex-6 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-6 .row-group {
	display: table-row-group;
}
._1q74-ex-6 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-6 .row {
	display: table-row;
}
._1q74-ex-6 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-6 .footer-group {
	display: table-footer-group;
}
._1q74-ex-6 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

F-1

F-2

---

13. File (6)

[css][div][table]normal(2x2)-column-footer.html

0.00MB

---

14. Example (7) : 테이블 타이틀 넣기

table-caption 속성값으로 타이틀을 넣을 수 있다.

._1q74-ex-7 {
}
._1q74-ex-7 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-7 .caption {
	display: table-caption;
	font-weight: bold;
}
._1q74-ex-7 .column-group {
	display: table-column-group;
}
._1q74-ex-7 column {
	display: table-column;
}
._1q74-ex-7 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-7 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-7 .header-group {
	display: table-header-group;
}
._1q74-ex-7 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-7 .row-group {
	display: table-row-group;
}
._1q74-ex-7 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-7 .row {
	display: table-row;
}
._1q74-ex-7 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-7 .footer-group {
	display: table-footer-group;
}
._1q74-ex-7 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

Table with div

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

F-1

F-2

---

15. File (7)

[css][div][table]normal(2x2)-caption.html

0.00MB

---

16. Example (8) : 텍스트를 박스의 한가운데로 정렬하기

cell 클래스에 text-align: center, vertical-align: middle 속성을 추가한다.

._1q74-ex-8 {
}
._1q74-ex-8 .table {
	display: table;
	border-collapse: separate;
	border-spacing: 5px;
	background: #02A80A;
	width: 200px;
	height: 200px;
}
._1q74-ex-8 .table .cell {
	text-align: center;
	vertical-align: middle;
}
._1q74-ex-8 .caption {
	display: table-caption;
	font-weight: bold;
}
._1q74-ex-8 .column-group {
	display: table-column-group;
}
._1q74-ex-8 .column {
	display: table-column;
}
._1q74-ex-8 .column:nth-child(1) {
	width: 40%;
}
._1q74-ex-8 .column:nth-child(2) {
	width: 60%;
}
._1q74-ex-8 .header-group {
	display: table-header-group;
}
._1q74-ex-8 .header-group .cell {
	background: #D9FF07;
}
._1q74-ex-8 .row-group {
	display: table-row-group;
}
._1q74-ex-8 .row-group .cell {
	display: table-cell;
	border: 2px solid;
}
._1q74-ex-8 .row {
	display: table-row;
}
._1q74-ex-8 .cell {
	display: table-cell;
	background: #41EA49;
}
._1q74-ex-8 .footer-group {
	display: table-footer-group;
}
._1q74-ex-8 .footer-group .cell {
	display: table-cell;
	background: #38EAF9;
}

Table with div

Column-1

Column-2

H-1

H-2

1-1

1-2

2-1

2-2

F-1

F-2

---

17. File (8)

[css][div][table]normal(2x2)-text-align.html

0.00MB

---

18. Summary

<TABLE>태그	CSS 속성
<table>	{ display: table }
<caption>	{ display: table-caption }
<colgroup>	{ display: table-column-group }
<col>	{ display: table-column }
<thead>	{ display: table-header-group }
<th>	{ display: table-cell }
<tbody>	{ display: table-row-group }
<tr>	{ display: table-row }
<td>	{ display: table-cell }
<tfoot>	{ display: table-footer-group }