[CSS] table 만들어보기

 

See the Pen by limhaneul2244 (@limhaneul2244) on CodePen.

**table 내부에 속성을 지정해주었으나, W3C에서 오류가 나므로 아래처럼 변경해야 한다.

기존	변경
cellpadding	td의 padding
cellspacing	border-spacing
border	border: 1px solid #000;

 

먼저 표를 만들면서 표 안에는 tr, td만 넣어야 한다는 고정관념을 깨버려따.

 

표 내부의 선을 없애고 두번째 행에 가로로된 dot solid를 삽입해야 하거나 다른 선을 넣어야 한다면

 

1. 우선 border-collapse: collapse 를 통해 td 간의 간격을 모두 없앤다. 

table {
  width: 60%;
  border-collapse: collapse; /*테두리 사이의 간격 없애기*/
  border: 1px solid #333;
  text-align: center;
}

 

2. tbody 안의 td에는 공통 class를 지정하고, 내부에 text와 점선이 들어갈 자리를 div 잡아준다.

여기서 잠깐, div는 division의 약자로 경계를 분할, 영역을 나눈다는 의미

 

그럼 이런 모양이 된다.

 

 

3. td에는 position: relative로 위치를 지정해주고 dotLine에는 position: absolute 를 통해 부모를 기준으로 잡게 한다. 

좌, 우에는 90%씩 width를 주어 여백이 있도록 만들고, 중앙에는 100%로 채워 위치를 잡는다.

이때 dotLine에는 높이를 지정해주지 않고 solid의 px값만 준다.