반응형 Table6 연습 — table + col + thead/tbody + caption-side 완전 정리 Web Development · HTML Table연습 문제 풀이 —table 구조 + col + thead/tbody + caption-side표를 의미 단위로 나누고, 컬럼별 스타일을 한 번에 적용하는 패턴시작 연습 문제 해답 코드국민 독서실태 표를 만들면서 쓰인 4가지 핵심 요소: thead/tbody 분리, col로 첫 열만 회색, caption-side로 제목 아래로, th 사용.table { border: 1px solid black; border-collapse: collapse; caption-side: bottom; /* 제목을 표 아래로 */ } td, th { border: 1px solid black; padding: 10px; } .heading { background: #eee;.. 2026. 5. 5. 테이블 — empty-cells 빈 셀 처리 완전 정리 Web Development · HTML Table테이블 빈 셀 처리 —empty-cells: show vs hide데이터가 비어있는 셀의 테두리를 그릴지 말지 결정시작 오늘 분석할 코드같은 표 두 개에 각각 empty-cells: show와 hide를 적용해서 빈 td의 테두리·배경이 어떻게 달라지는지 비교한다..schedule { border-collapse: separate; /* empty-cells는 separate일 때만! */ } #tb1 td { empty-cells: show; } /* 기본값 — 빈 셀도 그림 */ #tb2 td { empty-cells: hide; } /* 빈 셀은 보이지 않음 */ 서울 서울 vs 강원 /* 빈 셀 */ 실제 출력 미리보기.tb1 — empty-c.. 2026. 5. 5. 테이블 기본 — table border + td border (이중선) 완전 정리 Web Development · HTML Table테이블 기본 스타일 —table border + td border테이블과 셀 각각에 border를 줬을 때 생기는 이중선 현상시작 오늘 분석할 코드표 바깥쪽은 검은 실선, 셀 사이는 검은 점선으로 꾸민 코드. 이 형태에서는 표 바깥선과 셀 외곽선이 붙어 이중선처럼 보이는 점이 핵심 학습 포인트다..table1 { border: 1px solid black; /* 표 바깥 테두리 */ } .table1 td { border: 1px dotted black; /* 셀 테두리 (점선) */ padding: 10px; text-align: center; } class="table1"> 프로축구 경기 일정 울산울산 vs 인천 … 실제 출력 미리보기 (이중선 현상.. 2026. 5. 5. 테이블 — border-collapse:separate + border-spacing 완전 정리 Web Development · HTML Table테이블 — border-collapse:separate +border-spacing으로 셀 간격 만들기셀들을 일부러 떨어뜨려서 카드처럼 보이게 만드는 표시작 오늘 분석할 코드데이터 표의 표준은 collapse지만, 일부러 셀들을 띄워서 카드처럼 보이는 디자인 표가 필요할 때가 있다. 이때 separate와 border-spacing을 함께 쓴다..table1 { border: 1px solid black; border-collapse: separate; border-spacing: 20px 10px; /* 가로 20 / 세로 10 */ } .table2 { border-collapse: separate; border-spacing: 20px 10px; /.. 2026. 5. 5. 이전 1 2 다음 반응형