HTML 테이블

웹접근성이 준수된 테이블

<!-- UI Object -->
    
<!--  summary : 테이블 상세 설명  -->
    <table cellspacing="0" border="1" summary="메이져리그 2007시즌 1위~6위 팀순위, 경기수, 승, 패, 승률, 승차, 최근이 포함된 표" class="tbl_type">
       <!--   caption 테이블 설명(타이틀 형식)    -->
       	<caption>2007시즌 팀순위</caption>
        <colgroup>
            <col width="10%">
            <col>
            <col span="6" width="10%">
        </colgroup>
        <thead>
            <tr>
                <th scope="col" abbr="순위">순위</th>
                <th scope="col" abbr="팀">팀</th>
                <th scope="col">경기수</th>
                <th scope="col">승</th>
                <th scope="col">패</th>
                <th scope="col">승률</th>
                <th scope="col">승차</th>
                <th scope="col">최근</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>우승</td>
                <td>콜로라도</td>
                <td>845</td>
                <td>448</td>
                <td>511</td>
                <td>0.521</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row" class="ranking">1</th>
                <td>콜로라도</td>
                <td>163</td>
                <td>90</td>
                <td>73</td>
                <td>0.552</td>
                <td>-</td>
                <td>9승-1패</td>
            </tr>
            <tr>
                <th scope="row" class="ranking">2</th>
                <td>샌디에이고</td>
                <td>163</td>
                <td>89</td>
                <td>74</td>
                <td>0.546</td>
                <td>1</td>
                <td>4승-6패</td>
            </tr>
            <tr>
                <th scope="row" class="ranking">3</th>
                <td>뉴욕M</td>
                <td>163</td>
                <td>88</td>
                <td>74</td>
                <td>0.543</td>
                <td>1.5</td>
                <td>4승-6패</td>
            </tr>
            <tr>
                <th scope="row" class="ranking">4</th>
                <td>애틀랜타</td>
                <td>163</td>
                <td>84</td>
                <td>78</td>
                <td>0.519</td>
                <td>5.5</td>
                <td>5승-5패</td>
            </tr>
            <tr>
                <th scope="row" class="ranking">5</th>
                <td>밀워키</td>
                <td>163</td>
                <td>83</td>
                <td>79</td>
                <td>0.512</td>
                <td>6.5</td>
                <td>5승-5패</td>
            </tr>
            <tr>
                <th scope="row" class="ranking">6</th>
                <td>LAD</td>
                <td>163</td>
                <td>82</td>
                <td>80</td>
                <td>0.506</td>
                <td>7.5</td>
                <td>3승-7패</td>
            </tr>
        </tbody>
    </table>
    <!-- //UI Object -->

널리를 참고하여 테이블을 코딩하세요.

https://nuli.navercorp.com/sharing/ui/patternTable

UI 라이브러리

 

HTML 테이블 정의

HTML 테이블은 <table>태그 로 정의됩니다 .

각 테이블 행은 <tr>태그 로 정의됩니다 . 테이블 헤더는 <th>태그 로 정의됩니다 . 기본적으로 테이블 제목은 굵게 표시되고 가운데에 표시됩니다. 테이블 데이터 / 셀은 <td>태그 로 정의됩니다 .

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

 

주 :<td> 요소는 테이블 데이터 컨테이너.
여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록, 기타 테이블 등

 

HTML 테이블-스타일

<!-- HTML 테이블-접힌 테두리 -->
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<!-- HTML 표-셀 패딩 추가 -->
th, td {
  padding: 15px;
}

<!-- HTML 테이블-왼쪽 정렬 제목 -->
th {
  text-align: left;
}

<!-- HTML 테이블-테두리 간격 추가 -->
table {
  border-spacing: 5px;
}

 

HTML 테이블-여러 열로 확장되는 셀

셀이 둘 이상의 열에 걸쳐 있도록하려면 colspan속성을 사용하십시오 .

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

 

HTML 테이블-여러 행으로 확장되는 셀

셀이 둘 이상의 행에 걸쳐 있도록하려면 rowspan속성을 사용하십시오 .

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

 

HTML 테이블-캡션 추가

테이블에 캡션을 추가하려면 <caption>태그를 사용하십시오 .

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

 

테이블 테두리 & 테두리 축소

CSS에서 표 테두리를 지정하려면 border속성을 사용

border-collapse속성은 테이블 테두리를 단일 테두리로 축소할지 여부를 설정합니다.

<!-- 테이블 테두리 축소 -->
table {
  border-collapse: collapse;
}

<!-- 테이블 테두리 -->
table, th, td {
  border: 1px solid black;
}

 

테이블 패딩

 

테두리와 표의 내용 사이의 간격을 제어하려면 padding<td> 및 <th> 요소 의 속성을 사용하십시오 .

th, td {
  padding: 15px;
  text-align: left;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_padding

Tryit Editor v3.6

 

수평 분배기 & hover 반응

border-bottom가로 구분선의 경우 <th> 및 <td>에 속성을 추가하십시오 .

th, td {
  border-bottom: 1px solid #ddd;
}
tr:hover {
	background-color: #f5f5f5;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider

Tryit Editor v3.6

 

스트라이프 테이블

얼룩말 줄무늬 테이블의 경우 nth-child()선택기를 사용하고 background-color모든 짝수 (또는 홀수) 테이블 행 에 a 를 추가하십시오 .

tr:nth-child(even) {background-color: #f2f2f2;}

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_striped

Tryit Editor v3.6

 

테이블 색상

아래 예제는 <th> 요소의 배경색과 텍스트 색을 지정합니다.

th {
  background-color: #4CAF50;
  color: white;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_color

Tryit Editor v3.6

 

반응 형 테이블

화면이 너무 작아 전체 내용을 표시 할 수없는 경우 반응 형 테이블에 가로 스크롤 막대가 표시됩니다.

overflow-x:auto<table> 요소 주위에 컨테이너 요소 (예 : <div>)를 추가하여 반응 형으로 만듭니다.

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

 

---

Table

caption

캡션은 자신의 부모인 table과 같은 너비를 가짐. caption의 align (bottom,center,left,right,top(기본값))은 마크업흐름상 table의 최상위에 위치 해야함.

summary

Techniques of WCAG 2.0의 H73에서는 테이블의 행, 열을 2단계, 3단계로 정의하는 경우 summary에서 그 구조에 관한 것을 언급해 주어야 한다고함.

scope

읽어야 하는 방향을 지정해주면됨. scope="col"의뜻은 세로(column)로 읽어라. row는 가로(row)로 읽어라.

참고 URL : http://trio.co.kr/webrefer/html40/struct/tables.html#non-visual-rendering

id와 headers

scope와 같은 효과를 볼수 있지만, 마크업이 다소 늘어나게 됨.

summary, caption, scope, header 등을 사용할 경우 이를 스크린리더가 참조할 수는 있지만, 이러한 속성과 요소가 스크린리더만을 위한 것이 아니므로 HTML의 의미를 이해하고 이에 맞게 사용해야지 특정 브라우저나 사용자 기기만을 염두에 두고 HTML을 구성해서는 안됨. table내에 dl, ul, ol 등의 중복구조에 scope등을 쓰게 되는 마크업은 피해야함.

thead,tbody,tfoot

thead만 있으면 벨리데이터 오류. tfoot과 같은 경우 테이블의 가장 아래에 위치하며, 마크업의 흐름상 thead 다음 tfoot 다음 tbody 순으로 코딩해야함

colgroup

• 세로열전체를 그룹화 함. 사용하는것을 권장함.(가변적인 데이터가 들어오더라도, 사이즈를 유지시켜줌)
  속성으로는 span,width,bgcolor 가 있으며, width 나 class하여 사용하는것을 권장.
  ie6버그로 table에 bg를 깔게되면, 세로열을 기준으로 각col당 repeat를 하게 되므로, bg:none 시켜주면 해결 됨.
  모바일에서 CSS로 %를 사용시에 대응이 안되므로, <col width="%" /> 로 사용해야함.
• 테이블 내에 보더가 없는 경우에는 <col width="" />사용을 하며, 보더가 있는 경우에는 크로스브라우징시 1px 밀리는 이슈가 발생하여, <col class="" /> 를 사용하여 CSS에서 width를 핸들링함.
• 제목이 세로형일 시 <col class="넘버링"> 사용

 

caption, summary 적용 방식

[ 권장 ] 

summary와 caption의 내용이 중복되어 summary 생략 가능

<table>
<caption>표의 제목</caption>
</table>
// 추후 HTML5에서 summary가 이슈가 된다면 summary만 삭제가능