본문 바로가기
IT

[웹접근성] Style Guide: TABLE

by SOGNOD 2021. 5. 12.
반응형

<div class="tableType1">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="33%">
			<col width="*">
			<col width="33%">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">타이틀</th>
				<th scope="col">타이틀</th>
				<th scope="col">타이틀</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>내용</td>
				<td>내용</td>
				<td>내용</td>
			</tr>
		</tbody>
	</table>
</div>

 

.tableType1 table {table-layout:fixed}
.tableType1 {width: 83%;border-top:2px solid #ea002c;border-bottom:1px solid #e4e4e4;}

.tableType1 th{height:30px;padding:10px 20px;border-left:1px solid #e4e4e4;font-weight:bold;color:#333}
.tableType1 thead th{border-top:1px solid #e4e4e4;background:#f7f7f8}
.tableType1 thead tr:first-child th{border-top:0}
.tableType1 thead tr:first-child th:first-child, .tableType1 tbody tr:first-child th:first-child, .tableType1 td:first-child, .tableType1 tbody th:first-child{border-left:0}
.tableType1 tbody th{border-top:1px solid #e4e4e4}
.tableType1 td{height:30px;padding:10px 30px;border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4;text-align:center}
.tableType1 tfoot th {border-top:1px solid #e4e4e4;border-left:none;}

 

thead 에 th가 많을경우

<div class="tableType1">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="10%">
			<col width="20%">
			<col width="20%">
			<col width="*">
		</colgroup>
		<thead>
			<tr>
				<th scope="col" rowspan="2">타이틀1</th>
				<th scope="colgroup" colspan="2">타이틀그룹2</th>
				<th scope="col" rowspan="2">타이틀3</th>
			</tr>
			<tr>
				<th scope="col">타이틀2-1</th>
				<th scope="col">타이틀2-2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>내용</td>
				<td>내용</td>
				<td>내용</td>
				<td>내용</td>
			</tr>
		</tbody>
	</table>
</div>

tbody 에 th가 있을경우

<div class="tableType1">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="20%">
			<col width="20%">
			<col width="*">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">타이틀</th>
				<th scope="col">타이틀</th>
				<th scope="col">타이틀</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row" rowspan="3" class="addLine">타이틀</th>
				<td>내용</td>
				<td>내용</td>
			</tr>
		</tbody>
	</table>
</div>

tbody에 th가 많을경우

<div class="tableType1">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="12%">
			<col width="10%">
			<col width="20%">
			<col width="*">
		</colgroup>
		<thead>
			<tr>
				<th scope="col" colspan="2">타이틀</th>
				<th scope="col">타이틀</th>
				<th scope="col">타이틀</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="rowgroup" rowspan="3">타이틀그룹</th>
				<th scope="row">타이틀</th>
				<td>내용</td>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td>내용</td>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td>내용</td>
				<td>내용</td>
			</tr>
		</tbody>
	</table>
</div>

세로형 테이블

<div class="tableType2">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="15%">
			<col width="20%">
			<col width="15%">
			<col width="17%">
			<col width="*">
		</colgroup>
		<tbody>
			<tr>
				<th scope="row">타이틀</th>
				<td colspan="5">내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td>내용</td>
				<th scope="row">타이틀</th>
				<td>내용</td>
				<th scope="row">타이틀</th>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td colspan="5">내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td colspan="5">내용</td>
			</tr>
		</tbody>
	</table>
</div>

세로형 테이블에 th가 많은경우

<div class="tableType2">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="10%">
			<col width="20%">
			<col width="*">
		</colgroup>
		<tbody>
			<tr>
				<th scope="rowgroup" rowspan="3" class="addLine center">타이틀그룹</th>
				<th scope="row">타이틀</th>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row">타이틀</th>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row" colspan="2">타이틀</th>
				<td>내용</td>
			</tr>
			<tr>
				<th scope="row" colspan="2">타이틀</th>
				<td>내용</td>
			</tr>
		</tbody>
	</table>
</div>

테이블에 폼요소가 적용된 경우

<div class="infoBox">
	<p>추가 정보가 있을시 사용</p>
	<strong class="essential addInfo">필수</strong>
</div>
<div class="tableType2">
	<table border="1">
		<caption>테이블 설명을 서술형으로 제공합니다.</caption>
		<colgroup>
			<col width="20%">
			<col width="*">
		</colgroup>
		<tbody>
			<tr>
				<th scope="row"><label for="name">이름</label><strong class="essential">[필수입력]</strong></th>
				<td><input type="text" id="name" class="inputTxt" style="width:394px"></td>
			</tr>
			<tr>
				<th scope="row"><label for="call">연락처</label><strong class="essential">[필수입력]</strong></th>
				<td>
					<div class="selectBox" style="width:100px">
						<select title="전화번호 첫자리" id="call">
							<option value="aa" selected>선택</option>
							<option value="bb">010</option>
							<option value="cc">02</option>
						</select>
					</div>
					<span class="hyphen">-</span>
					<input type="text" title="전화번호 중간자리" class="inputTxt" style="width:104px">
					<span class="hyphen">-</span>
					<input type="text" title="전화번호 마지막자리" class="inputTxt" style="width:104px">
				</td>
			</tr>
			<tr>
				<th scope="row">주소<strong class="essential">[필수입력]</strong></th>
				<td>
					<input type="text" title="우편번호" class="inputTxt" style="width:104px"><a href="#" class="btnS btnDgray">우편번호검색</a>
					<p class="h10"><input type="text" title="기본 주소" class="inputTxt" style="width:284px"><input type="text" title="상세주소" class="inputTxt" style="width:284px"></p>
				</td>
			</tr>
			<tr>
				<th scope="row">상담유형</th>
				<td>
					<span class="radio">
						<input type="radio" id="radio1" name="rd" checked><label for="radio1">상담유형1</label>
					</span>
					<span class="radio">
						<input type="radio" id="radio2" name="rd"><label for="radio2">상담유형2</label>
					</span>
					<span class="radio">
						<input type="radio" id="radio3" name="rd"><label for="radio3">상담유형3</label>
					</span>
					<span class="radio">
						<input type="radio" id="radio4" name="rd"><label for="radio4">상담유형4</label>
					</span>
				</td>
			</tr>
			<tr>
				<th scope="row"><label for="txt">상담내용</label></th>
				<td>
					<textarea cols="50" rows="5" id="txt" style="height:178px"></textarea>
					<p class="byte"><em>214</em> <span>/ 500 byte</span></p>
				</td>
			</tr>
		</tbody>
	</table>
</div>
반응형
저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

[웹접근성] Html Guide: Button  (0) 2021.05.12
[웹접근성] Html Guide: Board  (0) 2021.05.12
[웹접근성] Style Guide: page navigation  (0) 2021.05.12
[웹접근성] Html Guide: Visual Image  (0) 2021.05.02
[웹접근성] 한국형 웹 콘텐츠 접근성 지침 2.1 / 1 ~ 5  (0) 2020.05.15

관련글

티스토리툴바