테이블 코드
<table> <tr> <td>1</td> <td>2</td> </tr> </table>얘를 실행하면
1 2
이렇게 1행 2열의 표가 만들어진다!
<table> </table>로 먼저 표 자리를 만든다
<tr></tr>은 행
<td>내용</td>은 행마다의 셀 만들 수 있다.
<th>는 제목셀 여기 들어가는 내용은 셀의 중앙에 배치, 굵게 나옴
테이블 사이즈 정하지 않으면 데이터 크기 따라 사이즈 달라짐
열 합치기 colspan 행 합치기 rowspan
행이나 열을 합칠 때는 남는 행/열을 지워준다
colspan/rowspan = ‘2’ 이런식으로 쓰면 열/행 2개를 하나로 합친다는 뜻!
표에 border 줄 때
.menu{width: 700px; border: 1px solid black;}
.menu td,.menu th{border: 1px solid black;}
이러면 겉에 border 주고 td/th(셀)마다 border 하나씩 줄 수 있다. 만약 셀 선이 separate 되지 않기를 원하면 border-collpase 로 합쳐주기(css table 태그에 border-collapse)
표 구조
<thead> /<tbody> /<tfoot>
표에서 열끼리 묶기 -<colgroup>
2번째 열을 묶고 싶으면<colgroup> <col> --> 얘는 별다른 스타일 지정하지 않고 열 개수를 맞추기 위한 태그 <col style = “”> ->2번째 열에 스타일 생김 </colgroup>
캡션 안보이게 하고 싶을 때
.free caption{display: none;}
대상요소
대상요소 :first-child
대상요소 :last-child
ㄴ부모로부터 몇 번째 자식인지
대상요소 :nth-child(n) <：과 nth 사이에 공백 있으면 안돼!!!!
.board td:nth-child(2){text-align: left; padding: left 15px;}
ㄴ두번째 열 왼쪽정렬 코드 (board 는 클래스 이름)
예시)td:last-child th:first-child <ul> <li>1</li> <!--li:nth-child(1)--> <li>2</li> <!--li:nth-child(2)--> <li>3</li> <li>4</li> </ul> <dl> <dt>제목</dt> <!--dt:nth-child(1)--> <dd>내용</dd> <!--dd:nth-child(2) <부모 기준이기 때문에 dd 1번이어도 (2)임--> <dd>내용</dd> <!-- dd:nth-of-type(2) <얘는 같은 타입 중 몇 번째인지 dd 중 2번이니까 (2)--> <dd>내용</dd> <dd>내용</dd> <dd>내용</dd> </dl>
