CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

표 꾸미기

표의 특징

표에 대한 HTML의 기본 디자인은 표 전체의 테두리와 셀(cell) 사이에 여백이 기본적으로 지정되어 있다. 이 여백을 무시하려면 <table> 태그에 border-collapse 효과의 값으로 collapse를 주면 된다. 

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			table{
				border:1px solid gray;
				border-collapse: collapse;
			}
			th{
				background-color: #d0d0d0;
				font-weight:bold;
			}
			th,td{
				border:1px solid gray;
				padding:5px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>순서</th>
				<th>과목명</th>
				<th>토픽수</th>
			</tr>
			<tr>
				<td>1</td>
				<td>웹서비스 만들기</td>
				<td>12</td>
			</tr>
			<tr>
				<td>2</td>
				<td>HTML 수업</td>
				<td>13</td>
			</tr>
			<tr>
				<td>3</td>
				<td>HTML 수업</td>
				<td>9</td>
			</tr>
			<tr>
				<td>4</td>
				<td>CSS 수업</td>
				<td>15</td>
			</tr>
		</table>
	</body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. Rhys Jung
    감사합니다.
  2. JustStudy
    고맙습니다
  3. 심원태
    감사합니다~^^!
    대화보기
    • gg
      대화보기
      • 이웃집토토로
        예제처럼 boder의 스타일이 solid로 동일하면 테이블이나
        tr,th,td 어디에서 border를 지정해주어도 차이가 없습니다.
        그러나 스타일을 다르게 하는 경우 및 코드변경 시 가변성이 있습니다.
        가령 table에 solid 대신 dooted를 넣어주면 외곽 테두리만 점섬으로 표시됩니다.

        자세한 설명은 http://www.w3schools.com......asp 에서 확인해보시기 바랍니다.
        대화보기
        • 물어볼게있어욤
          궁금한게 있는데요

          table에 border 1px정의 되어있는 거는 빼도 되지 않나욤?
          아래 th와 td에 보더가 되어있으면 겉에 table엔 안넣어도 되지 않나 해서욤~
        • 정민규
          정말 쏙쏙 들어오네여~ 생황코딩 알게된건 정말 행운입니다 저에게 감사드립니다~
        • 크레용샘
          잘 보았습니다.
          감사합니다.
        • 민팀장
          음~~!!
        • 유형찬
          감사합니다.^^
        • 별모모
          [재학습] 1. table에 border-collapse:collapse 하고, 2.표 안의 th, td에도 border을 주어야 안에 선이 보입니다.

          table{
          border:1px solid gray;
          border-collapse: collapse;
          }

          th,td{
          border:1px solid gray;
          padding:5px;
          }
        • 용12
          강의 정말 좋아요 감사합니다~!
        • 지니고미
          px, 말고 em을 사용해도 작동하네요.
        • Starmomo
          [요약] table{ border-collapse: collapse;} - 선이 이중으로 나타나는 선 사이의 공간을 없앰.th{ background-color: #d0d0d0;} - 표머리의 배경색으로 제목을 강조할 수 있음.th,td{border:1px solid gray;padding:5px;} - table와 함께 th, td에도 border:1px을 주어야 안쪽에도 선이 그어짐.
        • 누노
          유용하네요 여백제거! 추르륵
        • bluesky
          친절한 강의 감사합니다.
        • 상범 김
          감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기