분류 전체보기589 HTML 테이블 스타일 CSS를 사용하여 테이블을 더 보기 좋게 만듭든다. HTML 테이블 - Zebra Stripe(얼룩말 줄무늬) 다른 모든 테이블 행에 배경색을 추가하면 멋진 얼룩말 줄무늬 효과를 얻을 수 있다. 다른 모든 테이블 행 요소에 스타일을 지정하려면 다음과 같이 :nth-child(even) 선택기를 사용한다: 얼룩말 줄무늬 스타일 테이블 얼룩말 줄무늬 테이블의 경우 n번째 자식() 선택기를 사용하고 모든 짝수(또는 홀수) 테이블 행에 배경색을 추가합니다: 이름 성 포인트 길동 홍 100원 철수 이 150원 순이 강 300원 영희 최 250원 수평, 수직 얼룩말 줄무늬 조합 스타일 위의 두 예제에서 스타일을 결합할 수 있으며 다른 모든 행과 다른 모든 열에 줄무늬가 있다. 투명한 색상을 사용하면 중복 효과가 있.. 2023. 5. 11. HTML 테이블 Colspan & Rowspan HTML 테이블에는 여러 행 및/또는 열에 걸쳐 있는 셀이 있을 수 있다. HTML 테이블 - Colspan 여러 열에 걸쳐 셀 범위를 설정하려면 colspan 속성을 사용한다: 두 열에 걸쳐 있는 셀 셀 범위를 둘 이상의 열로 만들려면 colspan 속성을 사용합니다. 이름 나이 길동 홍 43 철수 이 57 참고: colspan 속성의 값은 스팬할 열 수를 나타낸다. HTML 테이블 - Rowspan 여러 행에 걸쳐 셀 범위를 설정하려면 rowspan 속성을 사용한다: 두 행에 걸쳐 있는 셀 셀 범위를 둘 이상의 행으로 만들려면 rowspan 속성을 사용합니다. 이름 길동 전화번호 555-1234 555-8745 참고: rowspan 특성의 값은 범위를 지정할 행 수를 나타낸다. 마무리 이번 글에서는 .. 2023. 5. 10. HTML 테이블 채우기와 간격(HTML Table Padding & Spacing) HTML 테이블은 셀 내부의 패딩과 셀 사이의 간격을 조정할 수 있다. HTML 테이블 - 셀 패딩 셀 패딩은 셀 가장자리와 셀 내용 사이의 공간이다. 기본적으로 패딩은 0으로 설정됩니다. 테이블 셀에 패딩을 추가하려면 CSS 패딩 속성을 사용한다: 테이블 셀 패딩 셀 패딩은 셀 내용과 경계 사이의 공간을 지정합니다. 이름 성 나이 길동 홍 50 철수 김 94 영희 박 80 팁: 패딩을 5px로 변경해 봅니다. 내용 위에만 패딩을 추가하려면 padding-top 속성을 사용한다. 그리고 다른 측면은 padding-bottom, padding-left 및 padding-right 속성입니다: 테이블 셀패딩- 위, 아래, 왼쪽, 오른쪽 셀 내용의 네 면 모두에 대해 다른 패딩을 지정할 수 있습니다. 이름 성.. 2023. 5. 9. HTML 테이블 헤더(Table Headers) HTML 테이블에는 각 열 또는 행 또는 많은 열/행에 대한 헤더가 있을 수 있다. 아래 그림은 테이블 헤더의 다양한 예시이다. HTML 테이블 헤더 테이블 헤더는 th 요소로 정의된다. 각 th 요소는 테이블 셀을 나타낸다. 테이블 헤더 이름 성 나이 길동 홍 50 영희 이 94 철수 김 80 수직 테이블 헤더(Vertical Table Header) 첫 번째 열을 테이블 머리글로 사용하려면, 각 행의 첫 번째 셀을 th 요소로 정의합니다: 수직 테이블 헤더 각 테이블 행의 첫 번째 테이블 셀을 TH 요소로 설정하면 첫 번째 열이 테이블 헤더가 됩니다: 이름 길동 철수 성 홍 김 나이 50 94 테이블 헤더 정렬 기본적으로 테이블 헤더는 굵고 가운데 정렬로 설정되어 있다. 테이블 헤더를 왼쪽 정렬하려면.. 2023. 5. 8. 이전 1 ··· 79 80 81 82 83 84 85 ··· 148 다음
