- table
1-1) table #1 접근성
웹에서 위와 같은 표를 작성할 때 table을 사용한다.
<table>
<caption class="hide">
<strong>표의 타이틀</strong>
<p>표의 세부 내용 작성</p>
</caption>
</table>
<table>
<caption class="hide">
표의 타이틀 표의 세부 설명
</caption>
</table>
table안에는 시각장애인들을 위한 접근성을 위해 caption을 넣어줘야 한다.
'본문 바로가기'처럼 화면에는 표시되지 않는 내용이므로 hide class를 적용시켰다.
* reset.css의 .hide에 caption을 추가해도 된다.
1-2) table #2 colspan, rowspan
<table>
<caption class="hide"></caption>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="3">5</td>
<td>6</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<!-- //주석 -->
<hr>
<!-- table>tr*4>td*5 -->
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td rowspan="2">12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
colspan, rowspan은 표의 셀 병합을 할 때 사용한다.
colspan은 값만큼 가로로 병합이 되고, rowspan은 세로로 병합이 된다.
1-3) table #3 colspan, rowspan 연습
<div>
<h2>ex1</h2>
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>ex2</h2>
<table>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>ex3</h2>
<table>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h2>ex4</h2>
<table>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>
<h2>ex5</h2>
<table>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>
<h2>ex6</h2>
<table>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td></td>
</tr>
</table>
<h2>ex7</h2>
<table>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
1-4) table #4 예제 1
<style>
.bbs {
width: 1100px;
margin: 50px auto ;
}
/* table 너비 100% reset.css 처리 */
.bbs .tb {
width: 100%;
}
/* 열 너비값만 넣기 */
.bbs .tb .w1 {
width: 80px;
}
.bbs .tb .w2 {}
.bbs .tb .w3 {
width: 110px;
}
.bbs .tb .w4 {
width: 80px;
}
.bbs .tb th, .bbs .tb td {
height: 50px;
border-bottom: 1px solid gray;
vertical-align: middle;
text-align: center;
}
.bbs .tb thead {}
.bbs .tb thead tr {}
.bbs .tb thead tr th {
border-top: 2px solid orange;
font-size: 18px;
font-weight: 500;
}
.bbs .tb tbody {}
.bbs .tb tbody tr {}
.bbs .tb tbody tr td:nth-child(2) {
text-align: left;
text-indent: 20px;
}
.bbs .tb tbody tr:last-child td {
border-bottom: 2px solid #000;
}
/* tr에 css 걸기보단 td에 걸도록 하자 */
.bbs .paging {
margin-top: 50px;
text-align: center;
}
.bbs .paging a {
display: inline-block;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
border: 1px solid tan;
}
.bbs .paging a.on {
background: lightblue;
border-color: lightblue;
color: white;
}
</style>
</head>
<body>
<div class="bbs">
<table class="tb">
<caption class="hide">
<strong></strong>
<p></p>
</caption>
<!-- 열 너비 -->
<colgroup>
<col class="w1">
<col class="w2">
<col class="w3">
<col class="w4">
</colgroup>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">등록일</th>
<th scope="col">조회</th>
</tr>
</thead>
<tbody>
<tr>
<td>890</td>
<td>카카오톡 온라인 입학설명회</td>
<td>2020.01.03</td>
<td>509</td>
</tr>
<tr>
<td>889</td>
<td>문화행사 뮤지컬 [레베카] 지원완료자 초대 이벤트</td>
<td>2019.12.31</td>
<td>2276</td>
</tr>
<tr>
<td>890</td>
<td>카카오톡 온라인 입학설명회</td>
<td>2020.01.03</td>
<td>509</td>
</tr>
<tr>
<td>889</td>
<td>문화행사 뮤지컬 [레베카] 지원완료자 초대 이벤트</td>
<td>2019.12.31</td>
<td>2276</td>
</tr>
<tr>
<td>890</td>
<td>카카오톡 온라인 입학설명회</td>
<td>2020.01.03</td>
<td>509</td>
</tr>
<tr>
<td>889</td>
<td>문화행사 뮤지컬 [레베카] 지원완료자 초대 이벤트</td>
<td>2019.12.31</td>
<td>2276</td>
</tr>
<tr>
<td>890</td>
<td>카카오톡 온라인 입학설명회</td>
<td>2020.01.03</td>
<td>509</td>
</tr>
<tr>
<td>889</td>
<td>문화행사 뮤지컬 [레베카] 지원완료자 초대 이벤트</td>
<td>2019.12.31</td>
<td>2276</td>
</tr>
<tr>
<td>890</td>
<td>카카오톡 온라인 입학설명회</td>
<td>2020.01.03</td>
<td>509</td>
</tr>
<tr>
<td>889</td>
<td>문화행사 뮤지컬 [레베카] 지원완료자 초대 이벤트</td>
<td>2019.12.31</td>
<td>2276</td>
</tr>
</tbody>
</table>
<p class="paging">
<a href="#"> < </a>
<a href="#" class="on">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#"> > </a>
</p>
</div>
</body>
1-5) table #5 예제 2
<style>
.bbs {
width: 1100px;
margin: 20px auto;
}
.bbs .tb {}
.bbs .tb .w1 {
width: 250px;
}
.bbs .tb .w2 {
width: 270px;
}
.bbs .tb .w3 {
width: auto;
}
.bbs .tb th, .bbs .tb td {
padding: 15px 0;
vertical-align: middle;
border-bottom: 1px dotted lightgray;
border-right: 1px dotted lightgray;
text-align: left;
}
.bbs .tb tbody tr td:last-child, .bbs .tb thead tr th:last-child {
border-right: none;
}
.bbs .tb thead {}
.bbs .tb thead tr {}
.bbs .tb thead tr th {
background: lightblue;
font-weight: 500;
font-size: 18px;
text-align: center;
border-top: 2px solid #000;
}
.bbs .tb tbody {}
.bbs .tb tbody tr {}
.bbs .tb tbody tr th {
background: lightcyan;
text-indent: 20px;
}
.bbs .tb tbody tr td {
padding-left: 20px;
}
.bbs .tb tbody tr td ul li::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
background: gray;
border-radius: 50%;
margin-right: 10px;
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="bbs">
<table class="tb">
<caption>
<strong>테이블 제목</strong>
<p>원서접수 구분 일정 내용 설명</p>
</caption>
<colgroup>
<col class="w1">
<col class="w2">
<col class="w3">
</colgroup>
<thead>
<tr>
<th scope="col">구분</th>
<th scope="col">일정</th>
<th scope="col">내용</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">인터넷 원서접수 및 전형료 납부</th>
<td>2022. 12. 1(목) ~ 2023. 1. 11(수)</td>
<td>
<ul>
<li>인터넷 접수만 가능(PC, 모바일)</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">입학서류 제출</th>
<td>2022. 12. 1(목) ~ 2023. 1. 11(수)</td>
<td>
<ul>
<li>온라인, 등기우편 또는 방문제출</li>
<li>기간내 입학서류 제출</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">합격자 발표</th>
<td>2023. 1. 17(화)</td>
<td>
<ul>
<li>입학홈페이지, 문자메시지(SMS)</li>
<li>합격여부는 입학홈페이지에서 직접 확인</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">기본등록금 납부</th>
<td>2023. 1. 17(화) ~ 1. 19(목)</td>
<td>
<ul>
<li>합격자에 한해 기본등록금(30만원) 납부</li>
<li>홈페이지에서 신용카드 및 계좌납부</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">학번발급</th>
<td>2023. 1. 26(목) 14시</td>
<td>
<ul>
<li>기본등록금 납부자를 대상으로 학번발급</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">수강신청</th>
<td>2023. 1. 26(목) ~ 1. 31(화)</td>
<td>
<ul>
<li>학생포털에서 직접 신청</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">수강등록금 납부</th>
<td>2023. 2 .7(화) ~ 2. 14(화)</td>
<td>
<ul>
<li>학생포털에서 신용카드 및 계좌납부</li>
<li>최소학점(12학점)이상 신청 시 신청하신 학점에 대한 수업료납부</li>
<li>이미 납부한 기본등록금(30만원)은 수강등록금 납부시 자동 감액 처리</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">개강</th>
<td>2023. 2. 27(월)</td>
<td>
<ul>
<li>대학포털에서 로그인을 통한 강의수강</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</body>
table의 테두리나 속의 border 속성을 다르게 줄 수 도 있고, nth-child나 first-shild, last-child와 같은 선택자를 사용해 원하는 대로 구현할 수 있다.
1-6) table #6 예제 3
<main id="container" class="bbs">
<section id="content">
<div class="inner">
<h2>전형방법</h2>
<h3>전형자료 평가기준</h3>
<table class="tb tb1">
<caption>
<strong>전형자료 평가기준</strong>
<p>평가항목 평가기준 반영비율</p>
</caption>
<colgroup>
<col class="w1">
<col class="w2">
<col class="w3">
</colgroup>
<thead>
<tr>
<th scope="col">평가항목</th>
<th scope="col">평가기준</th>
<th scope="col">반영비율</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">총점</td>
<td>100%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>적성 평가(학업준비도검사)</td>
<td>자율성,유능성, 관계성, 정서적안정성, 관계민감성, 인내성 등</td>
<td>30%</td>
</tr>
<tr>
<td>학업계획</td>
<td>지원동기 및 학업계획 등</td>
<td>70%</td>
</tr>
</tbody>
</table>
<p>
※ 적성평가의 경우 1회 응시하여 30분 이내 작성 완료, 응시 후 수정불가
</p>
<h3>동점자 처리기준</h3>
<table class="tb tb2">
<caption>
<strong>동점자 처리기준</strong>
<p>우선순위 항목</p>
</caption>
<colgroup>
<col class="w1">
<col class="w2">
</colgroup>
<thead>
<tr>
<th scope="col">우선순위</th>
<th scope="col">항목</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>학업계획 총점 우수자</td>
</tr>
<tr>
<td>1</td>
<td>학업계획 총점 우수자</td>
</tr>
</tbody>
</table>
<h2>추가합격자 선발</h2>
<ul>
<li>입학포기 및 등록금 환불로 인한 결원이 발생될 경우에는 예비합격자 중에서 추가합격자를 전형성적순으로 선발합니다.</li>
<li>지원서상에 추가합격 통보가 가능한 연락처를 반드시 기재하도록 합니다.</li>
<li>지원서상에 연락처를 잘못 기재하거나 연락두절로 인하여 추가합격 통지가 불가능할 경우 차순위자에게 합격기회를 이양합니다.</li>
</ul>
</div>
</section>
</main>#wrap {
width: 100%;
min-width: 1600px;
}
.inner {
width: 1100px;
margin: auto;
position: relative;
box-sizing: border-box;
}
#header {
width: 100%;
background: lightgray;
}
#header .inner {
height: 150px;
background: lightblue;
}
#subVisual {
width: 100%;
height: 350px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(../images/cat4.jpg);
background-size: cover;
display: flex;
justify-content: center;
}
#subVisual h2 {
font-size: 50px;
color: white;
}
#container {}
#content {}
/* 페이지명 bbs*/
.bbs {
width: 1100px;
margin: 20px auto;
}
.bbs .inner {
padding: 10px 0;
}
.bbs .inner p {
margin-top: 15px;
margin-bottom: 30px;
}
.bbs .tb1 .w1 {
width: 250px;
}
.bbs .tb2 .w1 {
width: 125px;
}
.bbs .tb1 .w2 {
width: auto;
}
.bbs .tb1 .w3 {
width: 200px;
}
.bbs .tb th, .bbs .tb td {
border: 1px solid black;
padding: 10px;
border-left: none;
}
.bbs .tb th:last-child, .bbs .tb td:last-child {
border-right: none;
}
.bbs .tb tr th, .bbs .tb tr td {
text-align: center;
font-size: 18px;
}
.bbs .tb tr:first-child th {
border-top: 3px solid #003c6d;
border-bottom: none;
background: #f1f2f8;
font-weight: 700;
}
.bbs .tb td:nth-child(1) {
background: #fafafc;
font-weight: 700;
}
.bbs .tb1 tbody tr td:nth-child(1), .bbs .tb1 tbody tr td:nth-child(2) {
text-indent: 15px;
text-align: left;
}
.bbs .tb2 tbody tr td:nth-child(2) {
text-indent: 15px;
text-align: left;
}
.bbs h2 {
font-size: 30px;
color: navy;
margin-bottom: 10px;
margin-top: 50px;
}
.bbs h2::before {
content: "";
display: inline-block;
width: 2px;
height: 25px;
margin-right: 15px;
margin-bottom: -3px;
background: navy;
}
.bbs h3 {
font-size: 25px;
color: #3a71c3;
margin-bottom: 15px;
}
.bbs .inner ul li {
font-size: 18px;
line-height: 2;
}
.bbs .inner ul li::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: gray;
margin-right: 10px;
margin-bottom: 3px;
}
#footer {
width: 100%;
background: lightgreen;
}
#footer .inner {
height: 300px;
background: lightcoral;
}
reset.css안에 widtn: 100%를 넣어두었다.
* table에 border-collapse: collapse; border-spacing: 0; 를 주지 않으면 아래와 같이 표 사이의 간격이 벌어져 두 줄이 생기거나 겹쳐 두껍게 나오게 된다.
