HtmlCss. 9. 문제//테이블 만들기

kimkim·2024년 10월 4일
0

문제

정답

내 풀이

<table>
  <tr>
    <th>교시/요일</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>1교시</td>
    <td>국어</td>
    <td>수학</td>
    <td>일본어</td>
  </tr>
  <tr>
    <td>2교시</td>
    <td>영어</td>
    <td>국사</td>
    <td>음악</td>
  </tr>
</table>
table,tr,th,td{
  border : 1px black solid
}
td:first-child {
  font-weight: bold;
  text-align : center;
}

선생님 풀이

<table>
    <tr>
        <th>교시/요일</th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th>1교시</th>
        <td>국어</td>
        <td>수학</td>
        <td>일본어</td>
    </tr>
    <tr>
        <th>2교시</th>
        <td>영어</td>
        <td>국사</td>
        <td>음악</td>
    </tr>
</table>
table,
tr,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

핵심사항

table은 td로 이루어져있고 td는 tr로 이루어져 있다.

border : 테두리

  • 선 종료, 색, 선 굵기 입력하면 나타남

border-collapse: 선 합치기

  • 이중으로 된 선들을 합쳐줌

table은 정보들을 정리하여 보기 쉽게 보여줄때 사용한다.

실무에서는 잘 안쓰는 편이지만 직관적이고 쉬운편

0개의 댓글