CSS Table 테두리 밑에만 색상 넣는법

 

• 테두리 밑에만 색상 넣는법

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

 

 

- Table HTML 구성 

• table태그 내에 tr은 row, td는 column을 의미
  • 원하는 만큼 row, column을 넣어주면 표가 완성
• tbody, thead는 그냥 헤드부분 영역구분을 위해 사용
  •  td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

 

 

 

- vertical-align 

• 테이블 내에서의 상하정렬하는 속성
  • top, bottom, middle 사용가능

td, th {
  vertical-align : middle;
}

 

• inline 요소 간 상하정렬 속성도 vertical-align 
• top, middle, bottom 말고도 super, sub, px 단위로 사용가능

<p>
  <span style="font-size : 50px">Greetings</span>   <span style="font-size : 20px">안녕</span>
</p>

 

 

- 테두리 밑에만 색상 넣는법

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

 

 

- 셀 블록마다 width를 설정

• 하나의 td에만 width를 주어도 전체 열의 width가 적용이 됩니다
• 하나의 td에 width를 주어도 전체 열의 width가 적용이 됩니다.

<table>
  <tr>
    <td class="name">상품명</td>
    <td class="price">가격</td>
    <td>수량</td>
  </tr>
</table>

.name {
  width : 50%
}
.price {
  width : 20%
}

 

 

- td 여러개 합치기

• colspan ="n" < 합칠 숫자

<td colspan="4"></td>