Search for:

HTML Table

HTML Table Borders

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

table, th, td {
  border: 1px solid black;
  border-collapse: collapse; <-border를 붕괴=합친다, 허문다
}

tr은 보더 적용 X

background-color는

TD >>>> TR > Tabel 순으로

TD가 최우선으로 적용됨.

TD 기본형

TR TD가 모인 것 (줄마다 색을 주고 싶으면 사용)

Table TR이 모인 것

크롬에서는 TR 위에 Tbody가 생김(없을 시 만들어냄)

tabel > thead > th > td

tabel > tbody(1개 이상 있어야 됨) > tr > td

tabel > tfoot > tr > td

table, th, td {
border: 1px solid black;
border-radius: 10px; <-collapse랑 같이 있으면 적용X
border-collapse: collapse;
}

colspan(좌우) / rowspan(상하) : 셀합치기

<tr>
    <th rowspan=”2″>Phone</th>
    <td>555-1234</td>
  </tr>

-> 2칸을 1개로 합침

border-spacing:

tr:nth-child(even) {
background-color: #D6EEEE;

even(짝) / odd(홀)

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

 background-color: rgba(150, 212, 212, 0.4);

=

헥스코드(=rgb)+불투명도(=a)

Colgroup

세로n줄을 1개로 묶음

<colgroup>
    <col span=”2″ style=”background-color: #D6EEEE”>
  </colgroup>

가로는 tr을 활용

Leave A Comment

All fields marked with an asterisk (*) are required