html/css table 표만들기

<table> : 표만들기

<caption> : 표의 제목 지정 필수 

<thead> : table 첫번째 표분류 행의 제목 지정 (tr로 제목열 생성>th 칸의 제목생성) 

<tbody> : table의 body 생략가능

<th> : table head 표의칸 제목 / 중앙정렬

<tr> : table row  열 (가로줄)  / 왼쪽정렬 

<td> : table data 셀 (내용) / 왼쪽정렬  (tr의 하위속성)

th : 제목              <table>               <caption>표의 제목 필수</caption>               <thead>표 행의 제목                 <tr> 표의 열                   표의칸 (제목)                    <th>제목</th>                 </tr>               </thead>
tr : 열 생성  td:내용	td:내용	td:내용

 

 

실습

 

긴제목 말줄임표시

.board_list_wrap .link {

    white-space: nowrap;

    max-width: 90%;

    display: inline-block;

    text-overflow: ellipsis;

    overflow: hidden;

}

제목 넓이영역

.board_list_wrap thead .col01 {width: 10%;}

.board_list_wrap thead .col03 {width: 15%;}

 

 

                <tr>
                  <th class="col01" scope="col">번호</th>
                  <th class="col02" scope="col">제목</th>
                  <th class="col03" scope="col">첨부파일</th>
                </tr>

 scope="col" 

시각장애인용
범위라는 뜻 col 지정시
표
번호 제목 첨부파일 차례대로 읽음 

테이블에 지정해줘야 접근성 제대로 적용