[HTML] - html/css 이용한 테이블 디자인

○ html/css 이용한 테이블 디자인

JSP 에서 DB 테이블의 데이터를 뽑아낼 때 사용할 디자인 예시들   // HTML 부분   <table class="type09">     <thead>     <tr>         <th scope="cols">타이틀</th>         <th scope="cols">내용</th>     </tr>     </thead>     <tbody>     <tr>         <th scope="row">항목명</th>         <td>내용이 들어갑니다.</td>     </tr>     <tr>         <th scope="row">항목명</th>         <td>내용이 들어갑니다.</td>     </tr>     <tr>         <th scope="row">항목명</th>         <td>내용이 들어갑니다.</td>     </tr>     </tbody> </table>   // CSS 부분   table.type09 {     border-collapse: collapse;     text-align: left;     line-height: 1.5; } table.type09 thead th {     padding: 10px;     font-weight: bold;     vertical-align: top;     color: #369;     border-bottom: 3px solid #036; } table.type09 tbody th {     width: 150px;     padding: 10px;     font-weight: bold;     vertical-align: top;     border-bottom: 1px solid #ccc;     background: #f3f6f7; } table.type09 td {     width: 350px;     padding: 10px;     vertical-align: top;     border-bottom: 1px solid #ccc; }     // HTML 부분     <table class="type11">     <thead>     <tr>         <th scope="cols">타이틀</th>         <th scope="cols">타이틀</th>         <th scope="cols">타이틀</th>     </tr>     </thead>     <tbody>     <tr>         <td>내용</th>         <td>내용</th>         <td>내용</th>     </tr>     <tr>         <td>내용</th>         <td>내용</th>         <td>내용</th>     </tr>     <tr>         <td>내용</th>         <td>내용</th>         <td>내용</th>     </tr>     </tbody> </table>   // CSS 부분   table.type11 {     border-collapse: separate;     border-spacing: 1px;     text-align: center;     line-height: 1.5;     margin: 20px 10px; } table.type11 th {     width: 155px;     padding: 10px;     font-weight: bold;     vertical-align: top;     color: #fff;     background: #ce4869 ; } table.type11 td {     width: 155px;     padding: 10px;     vertical-align: top;     border-bottom: 1px solid #ccc;     background: #eee; }     출처 : https://nanati.me/html_css_table_design/