표 스타일 CSS - table-layout / text-align

표 스타일 CSS - table-layout

• table-layout 속성을 이용하면 셀 안의 내용 양에 따라 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지를 결정할 수 있습니다.
• 기본형 : table-layout : fixed / auto
• table-layout : fixed로 설정해 너비를 고정하면 셀 너비보다 긴 내용은 셀 밖으로 밀려나가 버립니다. 각 셀의 너비를 고정 상태에서 셀 너비 안에 셀 내용을 표시하려면 word-break : break-all 속성을 추가해야 합니다. 또한 예상하지 못했던 셀의 줄 바꿈이 생기면 높이 값(height)도 예측하기 쉽지 않기 때문에 셀의 height 속성도 auto로 지정해야 합니다.

속성 값	설명
fixed	셀 너비를 고정합니다. 즉, 셀 내용에 따라 셀의 너비가 달라지지 않습니다.
auto	셀 내용에 따라 셀의 너비가 달라집니다. (기본 값)

table-layout : fixed; feight : auto; word-break : break-all 

 

<style>
    .exam1 {width: 300px; height: auto; table-layout: fixed; word-break: break-all;  border: 2px solid pink; padding: 15px;}
    .exam1 td {width: 150px; height: 10px; border: 2px solid powderblue; text-align: center;}
</style> 

표 스타일 CSS - text-align

• text-align 속성은 셀 안에서 텍스트의 수평 정렬 방법을 지정합니다.
• 기본형 : text-align : left / right / center

text-align을 지정하지 않았을 경우

 

text-align : center 을 지정했을 경우

 

<style>
    .exam2 {width: 500px; border: 2px solid pink; padding: 15px;}
    .exam2 th, td {border: 2px solid powderblue; padding: 10px;}
    
    .exam3 {width: 500px; border: 2px solid pink; padding: 15px;}
    .exam3 th, td {text-align: center;  border: 2px solid powderblue; padding: 10px;}
</style>