css 테이블4 CSS table style CSS table padding 경계와 표의 내용 사이의 공간을 제어하려면 요소와 래빗 요소의 패딩 속성을 사용합니다: The padding Property 이 속성은 테두리와 표의 내용 사이에 공백을 추가합니다. 이름 성 금액 길동 홍 100원 영희 이 150원 철수 조 300원 명수 최 250원 table, th, td 요소에 border속성에 1px solid #ddd 를 설정하여 회색을 설정하였고, table 요소에 border-collapse속성에 collapse 값을 설정하여 실선을 표시하도록 하였으며, width속성에는 100%를 설정하여 브라우저 너비 크기만큼 설정하였으며 td요소에 padding속성에 15px값을 설정하여 테이블 테두리로부터 15px 공백을 추가한 결과 화면은 아래 그림과.. 2023. 8. 17. 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 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 다음
