-
CSS 표꾸미기, 정렬하는 방법Dung--[CSS HTML] 2023. 4. 25. 17:08
CSS 표꾸미기, 정렬하는 방법
1. CSS 표 관련된 정렬 방법
표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은
1)표 : 왼쪽 정렬
2)제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬
3)내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬
4)셀 안의 내용 세로 정렬 : 가운데 정렬
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
</tbody>
</table>
</body>
</html>2. CSS 표정렬
표를 가운데 정렬하고자 할때는 margin 속성을 활용합니다. 좌우 margin 속성값을 auto로 정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
</style>표를 오른쪽으로 정렬하고자 할때는 float 속성을 활용합니다 속성의 값은 right로 설정합니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
float: right;
}
</style>
3. 셀 안의 내용을 가로 정렬 하는 방법
셀안의 내용 가로 정렬은 text-align 속성을 활용합니다. 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽의 정렬은 right가 속성값입니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
}
th {
text-align: left;
}
td {
text-align: right;
}
</style>
4. 셀안의 내용 세로 정렬방법
셀안의 내용 세로 정렬은 vertical-align 속성을 활용합니다. 위쪽 정렬은 top, 가운데 정렬은 middle, 아래쪽의 정렬은 bottom이 속성값입니다.
<style>
table, th, td {
border: 1px solid #bcbcbc;
}
table {
width: 400px;
height: 200px;
}
th {
vertical-align: top;
}
td {
vertical-align: bottom;
}
</style>
CSS 표만들기 및 테두리 꾸미는 방법
CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸
dsmotion.tistory.com
CSS 테이블 꾸미기, 표 크기 설정하는 방법
CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도
dsmotion.tistory.com
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS를 HTML에 적용하는 방법 및 설명 (1) 2023.04.26 CSS 테이블 꾸미기, 표 크기 설정하는 방법 (2) 2023.04.25 CSS 표만들기 및 테두리 꾸미는 방법 (0) 2023.04.25 CSS 글씨 컬러 변경하는 방법 (0) 2023.04.17 CSS 글자(폰트) 크기를 설정하는 방법 (0) 2023.04.17
