표 정렬하는 방법
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이
있습니다.
표는 기본적으로 다음과 같이 정렬됩니다.
- 표
<table>: 왼쪽 정렬 - 제목 셀
<th>: 가운데 정렬 - 내용 셀
<td>: 왼쪽 정렬
| Lorem | Ipsum | Dolor |
|---|---|---|
| Lorem | Ipsum | Dolor |
| Lorem | Ipsum | Dolor |
표 가운데 정렬하기
- 표를 가운데 정렬할 때는 margin 속성을 사용합니다.
- 좌우 margin 속성값을 auto로 정합니다.
table {
width: 70%;
margin-left: auto;
margin-right: auto;
}
table, th, td {
border: 1px solid #bcbcbc;
height: 50px;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
표 오른쪽 정렬하기
- 표를 오른쪽 정렬할 때는 float 속성을 사용합니다.
- 속성값을 right로 정합니다. 왼쪽 정렬은 left로 정합니다.
table {
width: 70%;
float: right;
}
table, th, td {
border: 1px solid #bcbcbc;
height: 50px;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
셀 안의 내용 가로 정렬하기
- 셀 안의 내용 가로 정렬은 text-align 속성을 사용합니다.
- 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽 정렬은 right가 속성값입니다.
table {
width: 70%;
}
table, th, td {
border: 1px solid #bcbcbc;
height: 50px;
}
th {
text-align: left;
}
td {
text-align: right;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
셀 안의 내용 세로 정렬하기
- 셀 안의 내용 세로 정렬은 vertical-align 속성을 사용합니다.
- 위로 정렬은 top, 가운데 정렬은 middle, 아래로 정렬은 bottom이 속성값입니다.
table {
width: 70%;
}
table, th, td {
border: 1px solid #bcbcbc;
height: 50px;
}
th {
vertical-align: top;
}
td {
vertical-align: bottom;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.