반응형 th4 연습 — 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. 테이블 기본 — 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. 테이블 셀 정렬 — vertical-align 완전 정리 Web Development · HTML Table테이블 셀 수직 정렬 —vertical-align: top · bottom · middle셀 높이가 클 때 안의 텍스트를 어디에 붙일지 결정시작 오늘 분석할 코드같은 표 안에 셀 3개가 있고, 각 셀에 다른 vertical-align 값을 주어 텍스트가 셀 안에서 어떤 위치에 붙는지 비교한다.td { height: 100px; padding: 20px; } .va1 { vertical-align: top; } .va2 { vertical-align: bottom; } .va3 { vertical-align: middle; } vertical-alignment class="va1">alignment class="va2">alignment class.. 2026. 5. 5. 테이블 — border-collapse:collapse 완전 정리 Web Development · HTML Table테이블 — border-collapse:collapse로이중선 합치기표 외곽선과 셀 외곽선이 합쳐져 한 줄짜리 깔끔한 격자 만들기시작 오늘 분석할 코드이전 예제(table-css1)에 한 줄 추가했을 뿐이다. border-collapse: collapse 한 줄로 이중선이 사라지고 깔끔한 격자가 된다..table1 { border: 1px solid black; border-collapse: collapse; /* ★ 핵심 한 줄 */ } .table1 td { border: 1px dashed black; padding: 10px; text-align: center; }실제 출력 비교기본 (border-collapse 없음 = separate):프로축구.. 2026. 5. 5. 이전 1 다음 반응형