표, 테이블에 스타일 넣기

표와 테이블에 스타일 만들기

 

 

테이블 사이즈를 설정하기 위해서는 width 속성 사용합니다.

<table width="500px "> 요즘음 모바일에서도 페이지가 잘 보여야 해서..

<table width="90%"> 이렇게 글이보여지는 공간의 퍼센테이지로 폭 설정을 많이 합니다. 저같은 경우는...

스타일 설정을 위해서는

 

테이블 폭 설정하기

table-layout : fixed;     이건 셀너비를 고정해버리고 내용이 많아져도 셀이 넓어지지 않습니다.

                                대신 글이 밖으로 넘어가므로 단어줄바꿈 속성을 넣어주어야 합니다.

table-layout : auto;     셀 내용에 따라 셀 폭이 달라짐. 속성을 넣지 않아도 기본값입니다.

table-layout : inherit;   부모요소의 테이블 레이아웃 값을 가져옵니다.

 

word-break : break-all;   단어줄바꿈

height : auto;   높이를 자동으로 조절합니다.

 

테이블 내용 좌우 정렬하기

text-align : left;        왼쪽정렬

text-align : right;      오른쪽정렬

text-align : center;    가운데정렬

text-align : justify;     좌우 양쪽 끝에 맞추어서 정렬

 

테이블 내용 위아래 정렬하기

vertical-align : baseline;        기본정렬

vertical-align : top;               위쪽정렬

vertical-align : middle;          중앙정렬    

vertical-align : bottom;          아래쪽정렬        

 

테이블 테두리 스타일 정하기

border-style : solid;               기본 실선

border-style : dotted;             점선으로 테두리만들기

border-collapse : collapse;    테두리 통합하기(표의 테두리와 셀의 테두리가 합쳐집니다.)

border-collapse : separate;    테두리 분리하기, 설정하기 않으면 기본값이 됩니다.

border-collapse : inherit;        부모값 상속

 

셀과 셀사이에 간격설정하기

border-spacing : 단위;          단위는 px, em으로 넣고,  좌우 상하를 모두 따로 지정할 수 있습니다.

border-spacing : inherit;        부모값을 상속받습니다.

 

테이블 입체적으로 만들기 th,td값 안에 넣으면 된다.

border : inset   3px;               셀이 안으로 들어가는 효과

 

비어있는 셀을 표시할지 여부 확인하기 (td 또는 th 스타일에 넣어주는 속성)

empty-cells : show;                셀이 비어있을 때 테두리를 그려 빈 셀을 표시

empty-cells : hide;                  셀이 비어있을 때 테두리를 안보이게합니다.

empty-cells : inherit;                부모속성값 상속

 

---

---

이 값들은 아래처럼 설정합니다. 또는 스타일 시트에 넣습니다.

<style>

#table1{

           border:1px solid grey;

           border-collapse : collapse;

 }

th, td{border : 1px solid black;

         border : inset   15px;  }

</style>

그리고 테이블 속성안에

 

<table id="table1"> 이렇게 넣으면 됩니다.

 

 

---

---

태그는 많이 테스트 해보는 것이 답이죠...