gwooden_코린이

css 표 다뤄보기 본문

프론트엔드/html

css 표 다뤄보기

gwooden22 2022. 12. 15. 17:50
728x90
<!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>
  <link rel="stylesheet" href="css/style4.css">
</head>
<body>
  <table>
    <caption>표 제목</caption>
    <tr>
      <th>머리글</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td><img src="image/KakaoTalk_20221215_121529290.gif">내용</td>
      <td>머리글</td>
      <td>머리글</td>
      <td>머리글</td>
    </tr>
    <tr>
      <td>머리글</td>
      <td></td>
      <td>머리글</td>
      <td>머리글</td>
    </tr>
    <tr>
      <td></td>
      <td>머리글</td>
      <td></td>
      <td>머리글</td>
    </tr>
  </table>
</body>
</html>
table {
  width: 50%;
  border: 1px solid black;
  /*border-collapse: collapse; /* 각각 간격을 없애준다. */
  table-layout: fixed;
  caption-side: bottom; /* 캡션 제목 위치 설정 */
  empty-cells: hide; /* 비어있는 칸은 아예 숨겨주는 기능 border-collapse: collapse <-- 이거랑 같이 사용 못함*/
}

td, th {
  border: 1px solid black;
}

img {
  width: 50px;
  vertical-align: middle;
}

728x90
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 > html' 카테고리의 다른 글

css 박스 사이즈  (0) 2022.12.16
css 포지션 float  (0) 2022.12.15
css 박스 모델  (0) 2022.12.15
css 네비바 구현 적용 해보기  (1) 2022.12.15
CSS 색상 투명도 조절 및 배경이미지 활용  (0) 2022.12.15
'프론트엔드/html' Related Articles more
Comments