CSS text-align 속성 : table 수평정렬
text-align 속성은 내용의 수평 정렬(왼쪽, 오른쪽 또는 가운데와 같은)을 td 또는 <th>에 설정한다.
기본적으로 덱스터 요소의 내용은 가운데 정렬되고 <클래스터> 요소의 내용은 왼쪽 정렬됩니다.
<td> 요소의 내용도 가운데 정렬하려면 text-align: center:
| <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { text-align: center; } </style> </head> <body> <h2>text-align 속성</h2> <p>이 속성은 내용의 수평 정렬(왼쪽, 오른쪽 또는 가운데 등)을 정렬로 설정합니다:</p> <table> <tr> <th>이름</th> <th>성</th> <th>금액</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>영희</td> <td>이</td> <td>150원</td> </tr> <tr> <td>철수</td> <td>조</td> <td>300원</td> </tr> <tr> <td>명수</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
td요소에 text-align 속성에 center값을 설정하여 테이블 데이터가 모두 가운데 정렬이 된 결과 화면은 아래 그림과 같다.
내용을 왼쪽 정렬하려면 text-align: left 속성을 사용하여 강제로 덱스터 요소의 정렬을 왼쪽 정렬한다:
| <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { text-align: left; } </style> </head> <body> <h2>text-align 속성</h2> <p>이 속성은 내용의 수평 정렬(왼쪽, 오른쪽 또는 가운데 등)을 정렬로 설정합니다:</p> <table> <tr> <th>이름</th> <th>성</th> <th>금액</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>영희</td> <td>이</td> <td>150원</td> </tr> <tr> <td>철수</td> <td>조</td> <td>300원</td> </tr> <tr> <td>명수</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
th요소에 text-align속성에 left값을 설정하여 테이블 데이터가 모두 가운데 정렬이 된 결과 화면은 아래 그림과 같다.
CSS vertical-align 속성 : table 수직 정렬
vertical-align 속성은 내용의 수직 정렬(위, 아래 또는 가운데)을 td 또는 <or>로 설정한다.
기본적으로 테이블에서 내용의 수직 정렬은 중간이다(병합 및 <병합> 요소 모두).
다음 예제에서는 <td> 요소의 수직 텍스트 정렬을 맨 아래로 설정한다:
| <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { height: 50px; vertical-align: bottom; } </style> </head> <body> <h2>vertical-align 속성</h2> <p>이 속성은 내용의 세로 정렬(위, 아래 또는 가운데)을 정렬로 설정합니다:</p> <table> <tr> <th>이름</th> <th>성</th> <th>금액</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>영희</td> <td>이</td> <td>150원</td> </tr> <tr> <td>철수</td> <td>조</td> <td>300원</td> </tr> <tr> <td>명수</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
CSS에 테이블에 수직 정렬로 vertical-align 속성에 bottom값을 설정하여 아래쪽에 정렬한 결과 화면은 아래 그림과 같다.
지금까지 테이블에 수평, 수직 정렬을 위해 text-align, vertical-align 속성값의 개념과 활용 예제를 살펴보았다.
반드시 눈으로, 손으로, 머리로 실습하여 익히기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS table style (0) | 2023.08.17 |
|---|---|
| CSS 적응형 테이블(Responsive Table) (0) | 2023.08.16 |
| CSS table size (0) | 2023.08.15 |
| CSS Table (0) | 2023.08.14 |
| CSS lists (0) | 2023.08.13 |
댓글