[HTML+CSS3] 테이블 -축구 경기 대진표 만들기

ODaram 2022. 10. 4. 12:44

테이블

축구 경기 대진표 만들기

아래의 내용으로 대진표 만들기
--------------------------------------------
지역 프로축구팀 일정
울산 울산 vs 인천 2022.10.04
부산 부산 vs 인천 2022.10.05
서울 서울 vs 인천 2022.10.06
기흥 기흥 vs 인천 2022.10.07

<!DOCTYPE html>
<html lang="ko">
<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>테이블</title>
  <style>

    .container {width:600px; margin:100px auto;}
    /*container가 줄면 talbe:width가 100%이기 때문에 같이 줄어듬*/
    table.box {
      width:100%;
      border-top:10px solid pink; /*bottom,top 값만 지정한다.*/
      border-bottom:10px solid pink;
      border-collapse: collapse;  /*테이블에 있는 기본 여백을 제거한다.*/
    }
    /* 개별 스타일 시트는 공통 스타일 시트 아래쪽에 작성 */
    table.box th, table.box td{ /*그룹 선택자*/
      padding:10px 15px;
      border-bottom:1px dashed darkgray;  /*실선 대신 점선을 많이 쓰고, bottom 값만 준다.*/
    }
    table.box th {
      font-size:40px;
      color:palevioletred;
      border-bottom:10px solid pink;
      background:lightpink;
    }
    table.box td {
      text-align:center;
    }
  </style>

</head>
<body>
<div class="container">
    <table class="box">
        <tr>
          <th>지역</th>
          <th>프로축구팀</th>
          <th>일정</th>
        </tr>
        <tr>
          <td>울산</td>
          <td>울산 vs 인천</td>
          <td>2022.10.04</td>
        </tr>
        <tr>
          <td>부산</td>
          <td>부산 vs 인천</td>
          <td>2022.10.05</td>
        </tr>
        <tr>
          <td>서울</td>
          <td>서울 vs 인천</td>
          <td>2022.10.06</td>
        </tr>
        <tr>
          <td>기흥</td>
          <td>기흥 vs 인천</td>
          <td>2022.10.07</td>
        </tr>
    </table>
  </div> <!-- end:container --> <!--테이블의 코드가 길어지기 때문에 끝나는 지점을 표시한다.-->

</body>