CSS만 사용하여 HTML 테이블을 카드 보기로 변환

기존 행과 열을 뛰어넘어 평범한 구식 HTML 테이블을 동적 카드 보기로 변환하는 방법을 탐색하는 최근 실험을 공유하고 싶습니다.

간단한 HTML 테이블로 시작

다음과 같은 간단한 HTML 테이블부터 시작해 보겠습니다.

<table>  
  <thead>  
    <tr>  
      <th>Company</th>  
      <th>Contact</th>  
      <th>Country</th>  
    </tr>  
  </thead>  
  <tbody>  
  <tr>  
    <td>Alfreds Futterkiste</td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro Moctezuma</td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>    
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro  </td>  
    <td>Francisco Chang</td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria </td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  <tr>  
    <td>Alfreds </td>  
    <td>Maria Anders</td>  
    <td>Germany</td>  
  </tr>  
  <tr>  
    <td>Centro comercial </td>  
    <td>Francisco </td>  
    <td>Mexico</td>  
  </tr>  
  </tbody>  
</table>

브라우저에서 렌더링하면 이런 모습입니다.

또 다른 HTML 테이블

화려한 것은 없습니다.

정의에 따르면 테이블은 행과 열로 구성됩니다. 기존의 행과 열 레이아웃을 어떻게 좀 더 동적인 것으로 변환할 수 있나요?

CSS 그리드의 힘을 발견하세요

테이블이 지루할 필요는 없습니다. 몇 가지 간단한 CSS 트릭을 사용하면 기존 HTML 표를 세련된 목록 또는 카드 보기로 쉽게 변환할 수 있습니다.

가장 좋은 점은 무엇인가요? JavaScript는 없고 순수 CSS만 있습니다!

CSS 그리드는 2007년부터 W3C 후보 권장 초안이었지만 현재 모든 주요 브라우저의 최신 버전에서 채택되었습니다.

CSS 그리드는 행과 열 모두에 맞게 설계되어 테이블과 같은 복잡한 레이아웃에 이상적입니다. 수평 및 수직 정렬을 동시에 관리할 수 있어 주로 1차원(행 또는 열)인 Flexbox보다 훨씬 더 많은 제어 기능을 제공합니다.

사용할 CSS 그리드 속성

1. 및 에 CSS 그리드 레이아웃 사용*t* .
2. CSS 표시 속성을 사용하고 모든 을 블록 요소로 설정합니다.

   CSS 그리드 속성을 사용하면 일반 HTML 테이블이 이미 마술처럼 반응형 목록 보기로 변환되어 각 레코드가 단일 열에 깔끔하게 표시됩니다.

   table tbody, table thead {  
     display: grid;  
   }  
   table td {  
     display: block;  
   }
   

   

   멋져보이지만 조금은 혼란스럽네요! 목록의 각 행에 약간의 여유 공간을 제공하기 위해 일부 CSS 테두리를 뿌려 보겠습니다.

   table, th, tr {  
     border: 1px solid black;  
   }
   

   됐어요. 새로운 모습을 확인해보세요! JavaScript 마법 한 줄도 없이 생성된 목록 보기에 비해 너무 초라하지 않습니다!

   

   이제 구식 HTML 테이블로 멋진 목록을 만들었습니다. 이 멋진 목록을 멋진 카드 보기로 어떻게 바꾸나요?

   스포일러 주의: CSS 몇 줄만 더 추가해 보세요!

   목록을 카드 보기로 변환

   테이블을 카드로 변환하는 마지막 카드 요령은 CSS 그리드 속성인 Grid-template-columns를 사용하는 것입니다.

   table tbody {  
     display: grid;  
     grid-template-columns: repeat(4, 1fr);  
   }
   

   grid-template-columns는 CSS 그리드 레이아웃에서 그리드 열의 구조를 정의하는 데 사용되는 CSS 속성입니다. 열의 수와 너비, 그리드 내 공간을 나누는 방법을 지정합니다.

   repeat() 함수를 사용하면 첫 번째 매개변수를 통해 원하는 열 수를 결정할 수 있습니다. 4라고 가정해 보겠습니다. 멋진 어림수를 좋아하지 않는 사람이 있을까요? 두 번째 매개변수는 해당 열의 크기(1fr 또는 사용 가능한 공간의 1분의 1)를 알려줍니다. 이는 마치 칼럼에 '모두가 똑같이 스페이스 파이를 나눠먹습니다!'라는 격려의 말을 전하는 것과 같습니다.

   우리의 마지막 카드 보기

   

   CodePen에서 잠시 시간을 내어 코드를 탐색하고 결과를 확인해 보세요. CSS 그리드 변환을 실험하고 놀기에 완벽한 장소입니다. 도중에 재미있는 놀라움을 발견할 수도 있습니다.

   CSS Grid는 반응형이므로 개발자가 다양한 화면 크기와 기기에서 레이아웃을 조정하고 리플로우하는 방법을 효과적으로 제어할 수 있습니다.

   선택사항: 카드 보기에 데이터 라벨 추가

   카드 보기는 시각적으로 매력적이지만 열 정보의 명확성이 부족하여 사용자가 각 카드에 표시된 데이터를 추측하게 만듭니다.

   JavaScript를 통합하면 각 열에 데이터 레이블을 원활하게 추가하여 레이블과 해당 셀 간의 연결을 강화할 수 있습니다.

   <table>  
     <thead>  
       <tr>  
         <th>Company</th>  
         <th>Contact</th>  
         <th>Country</th>  
       </tr>  
     </thead>  
     <tbody>  
     <tr>  
       <td>Alfreds Futterkiste</td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro Moctezuma</td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>    
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro  </td>  
       <td>Francisco Chang</td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria </td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     <tr>  
       <td>Alfreds </td>  
       <td>Maria Anders</td>  
       <td>Germany</td>  
     </tr>  
     <tr>  
       <td>Centro comercial </td>  
       <td>Francisco </td>  
       <td>Mexico</td>  
     </tr>  
     </tbody>  
   </table>
   

   지금은 이렇습니다

   

   데모

   우리가 시작한 HTML 테이블과 전혀 다릅니다. CSS 그리드를 사용하면 2차원 공간에서 행과 열을 모두 완벽하게 제어할 수 있으므로 레이아웃 옵션이 무궁무진합니다.

   결론

   이 튜토리얼은 빙산의 표면에 불과합니다. 보다 반응성이 뛰어난 레이아웃을 쉽게 만들고, 요소를 겹치고, 여러 행이나 열에 걸쳐 항목을 확장하고, 그리드 영역을 동적으로 조정할 수 있으므로 다양한 레이아웃 요구 사항에 맞게 다용도로 사용할 수 있습니다.

   즐거운 그리딩을 즐기세요!

   저자 소개

   저자는 인기 있는 PHP 데이터 그리드 도구(phpgrid.com)를 만든 베테랑 웹 개발자로서 CRUD의 강력한 기능을 활용하여 세상을 더 나은 곳으로 만들고 있습니다. 적어도 삶을 단순화하려는 개발자에게는 그렇습니다!

위 내용은 CSS만 사용하여 HTML 테이블을 카드 보기로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!