HTML/CSS문법79 CSS 적응형 테이블(Responsive Table) CSS Responsive Table (적응형 테이블) 화면이 너무 작아서 전체 내용을 표시할 수 없는 경우 응답 테이블에 수평 스크롤 막대가 표시된다: 적응형 테이블 화면이 너무 많은 경우 응답 테이블에 수평 스크롤 막대가 표시됩니다 전체 내용을 표시하기에는 작습니다. 브라우저 창의 크기를 조정하여 효과 확인: 적응형 테이블을 만들려면 테이블 요소 주위에 overflow-x:auto이 있는 컨테이너 요소(예: div)를 추가합니다: 이름 성 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 점수 길동 홍 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 철수 최 94 94 94 94 94 94 94 94 94 94 50 50 50 50 .. 2023. 8. 16. CSS table alignment CSS text-align 속성 : table 수평정렬 text-align 속성은 내용의 수평 정렬(왼쪽, 오른쪽 또는 가운데와 같은)을 td 또는 에 설정한다. 기본적으로 덱스터 요소의 내용은 가운데 정렬되고 요소의 내용은 왼쪽 정렬됩니다. 요소의 내용도 가운데 정렬하려면 text-align: center: text-align 속성 이 속성은 내용의 수평 정렬(왼쪽, 오른쪽 또는 가운데 등)을 정렬로 설정합니다: 이름 성 금액 길동 홍 100원 영희 이 150원 철수 조 300원 명수 최 250원 td요소에 text-align 속성에 center값을 설정하여 테이블 데이터가 모두 가운데 정렬이 된 결과 화면은 아래 그림과 같다. 내용을 왼쪽 정렬하려면 text-align: left 속성을 사용하여 강제.. 2023. 8. 16. CSS table size CSS table widht, height 속성 테이블의 width및 height는 너비 및 높이 속성에 의해 정의된다. 아래 예제에서는 테이블의 너비를 100%로 설정하고, ablish 요소의 높이를 70µs로 설정한다: width and height 속성 표 너비 및 표 머리글 행 높이 설정: 이름 성 금액 길동 홍 100원 영희 이 150원 철수 조 300원 명수 최 250원 table, td, th요소에 boder속성에 1px solid black 속성값을 설정하였고, table요소에 border-collapse에 collapse 속성값을 설정하여 실선을 설정하였으며 th요소에 height속성에 70px를 설정하여 테이블 헤더에 70px 크기를 설정한 결과 화면은 아래 그림과 같다. 페이지의 절반.. 2023. 8. 15. CSS Table CSS border 속성 CSS에서 테이블 테두리를 지정한다. border 속성을 사용한다. 아래 예제에서는 , 및 요소에 대한 솔리드 테두리를 지정한다: 테이블에 테두리를 추가: 이름 성 길동 홍 철수 이 table, th, td 요소에 border 속성을 1px solid 값을 설정하였고, 결과 화면은 아래 그림과 같다. CSS width: 100% 속성 위의 테이블은 경우에 따라 작아 보일 수 있다. 전체 화면에 걸쳐 있어야 하는 테이블(전체 너비)이 필요한 경우 요소에 width: 100%를 추가한다: 테이블에 테두리를 추가: 이름 성 길동 홍 철수 이 table, th, td 요소에 border 속성을 1px solid 값을 설정하였고, table 요소에 width속성에 100%값을 설정한 결과.. 2023. 8. 14. 이전 1 ··· 5 6 7 8 9 10 11 ··· 20 다음
