-
CSS 실습 - 조건부 테이블 만들기카테고리 없음 2023. 2. 5. 18:02
나의풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table, th,td { border: 1px solid black; } th,td { border-collapse: collapse; padding:10px; } .caption{ caption-side: bottom; } .heading{ background-color: #eee; } </style> </head> <body> <caption class="caption">2019 독서실태</caption> <table> <tr class="heading"> <th>구분</th> <th>성인</th> <th>독서자</th> </tr> <tr> <th class="heading">종이책</th> <td>6.1권</td> <td>11.8권</td> </tr> <tr> <th class="heading">전자책</th> <td>1.2권</td> <td>7.1권</td> </tr> <tr> <th class="heading">종이책</th> <td>0.2권</td> <td>5.5권</td> </tr> </table> </body> </html>해설풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ border:1px solid black; border-collapse: collapse; caption-side:bottom; } th,td { border:1px solid black; padding:10px; } .heading{ background-color: #eee; } </style> </head> <body> <table> <caption> 2019 독서실태</caption> <colgroup> <col class="heading"> <col> <col> </colgroup> <thead> <tr class="heading"> <th>구분</th> <th>성인</th> <th>독서자</th> </tr> </thead> <tbody> <tr> <th>종이책</th> <td>6.1권</td> <td>11.8권</td> </tr> <tr> <th>전자책</th> <td>1.2권</td> <td>7.1권</td> </tr> <tr> <th>오디오북</th> <td>0.2권</td> <td>5.5권</td> </tr> </tbody> </table> </body> </html>