Html css Table

 

 

1. 테이블 외곽선

table, th, td {
  border: 1px solid black;
}

2. 캘럽스 테이블 외곽선(외곽선 두깨를 1줄로)

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

3. 테이블 높이, 넓이

table {
  width: 100%;
}

th {
  height: 50px;
}

4. 텍스트 정렬

th {
  text-align: left; 
  text-align: center;
  text-align: right;
}

5. 테이블 영역에서의 정렬

td {
    vertical-align: middle; /*영역에서 중앙*/
    vertical-align: top;  /*영역에서 위쪽으로 */
    vertical-align: bottom; /*영역에서 아래쪽으로*/
}

6. 패딩

td {
  padding: 15px;  /*전체*/
  padding-top : 15px; /*위*/
  padding-bottom : 15px; /*아래*/
  padding-right : 15px; /*오른쪽*/
  padding-left : 15px; /*왼쪽*/
}

7. 배경색

td {
  background-color: #4CAF50;
}