[Table Tag] 테이블 태그

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^ 

그럼 시작합시다

 

테이블 태그에 대해서 공부해보도록 합시다.

 

1) table을 이용한 표 그리기

<table></table>: 표의 시작과 끝을 나타내는 태그입니다. 단독으로 사용되기도 하지만, 주로 몇 가지 속성을 부여받아 사용됩니다. 

<tr></tr>: table row의 줄임말로서 표의 한 행을 만들어 주는 태그입니다. 

<td></td>: table detail의 줄임말로서 표의 한 칸을(행 안의 열) 만들어 주는 태그입니다.

<th></th>: 메뉴는 굵은표시

<table border="1"> //구분선 굵기 1

    <tr>

        <td>1행 1열의 칸입니다.</td>

        <td>1행 2열의 칸입니다.</td>

        <td>1행 3열의 칸입니다.</td>

    </tr>

    <tr>

        <td colspan="2">2행 1열의 칸입니다.</td>

          <td rowspan="2">2행 3열의 칸입니다.</td>

    <tr>

<table>

colspan은 가로 칸(tr:: 행, 위아래 ) 들을 합쳐주는 기능을 하는 속성입니다. (합칠 칸의 수를 작성) 

rowspan은 세로 칸(td:: 열, 좌우) 들을 합쳐주는 기능을 하는 속성입니다. 

background는 표에 넣을 배경그림이 저장되어 있는 곳의 주소(URL)를 입력하는 곳.  

bgcolor는 배경색을 지정하는 속성입니다. 작은따옴표의 안에 색상코드나 영문으로 된 색상이름을 입력하여 배경색을 지정합니다. 

border는 표의 테두리 두께를 지정할 수 있게 하는 속성입니다. 숫자가 커질수록 테두리는 두꺼워지게 됩니다. 

bordercolor는 표에서 테두리의 색을 지정하는 속성입니다. 작은따옴표의 안에 색상코드나 영문으로 된 색상이름을 입력하여 테두리의 색을 지정합니다. 

bordercolorlight는 테두리에서 밝은 부분의 색을 지정하는 속성입니다.  (영문 또는 색상코드 입력)

bordercolordark는 테두리에서 어두운 부분의 색을 지정하는 속성입니다. (영문 또는 색상코드 입력)

cellpadding는 칸 안쪽 여백의 간격을 조절할 수 있게 하는 속성입니다. 

cellspacing은 셀(cell)과 셀의 간격을 조절할 수 있게 하는 속성입니다.

2) 스타일시트를 사용한 테이블의 표현입니다.

table {

    margin: 0 auto;

    padding: 10px;

    width: 600px;

    height: 200px;

    background: #f90 url(images/background.jpg);

    color: #fff;

    border: 4px solid #000;

}

 

3) 웹 접근성에 맞춘 table 태그와 속성들

① <caption> 태그 : 표에 대하여 간단하게 정의해서 작성합니다.

② <col> 태그 : 표에서 하나 이상의 <td> 태그에 대해 속성 값을 정의합니다.

③ <colgroup> 태그 : <col> 태그를 그룹으로 관리하는 <td> 태그의 구조적인 그룹화를 위해서 사용합니다. 소스의 양을 줄일 수 있습니다.

④ <thead> 태그 : 표의 머리말 부분을 표시하는 태그입니다.

⑤ <tbody> 태그 : 표의 내용 부분을 표시하는 태그입니다.

⑥ <tfoot> 태그 : 표의 꼬리말 부분을 표시하는 태그입니다.

⑦ summary 속성 : 표에 대한 설명을 작성합니다.

⑧ scope 속성 : 웹표준이 중요시 되면서 잘 사용하지 않던 제목(<th scope>)이 보편적으로 사용되고 있습니다. 이제 센스리더에서 이러한 제목 읽기 기능을 지원함으로써 시각장애인의 테이블 구조 이해에 큰 도움이 될 것입니다.

<div class="dataTbl1">

    <table summary="공지사항 목록입니다..">

        <caption>공지사항</caption>

        <colgroup>

            <col width="10%" />

            <col width="*" />

            <col width="14%" />

        </colgroup>

        <thead>

            <th scope="number">번호</th>

            <th scope="title">제목</th>

            <th scope="date">등록일</th>

        </thead>

        <tbody>

            <tr> ................... </tr>