CSS Tables

The look of an HTML table can be greatly improved with CSS:

 

html 테이블의 외관은 css로 멋지게 향상될수 있다.

 

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:

 

table 의 경계

테이블의 경계를 명시 하기 위해선 border 속성을 사용하라.

<table>, <th>, <td> 요소의 검정색 경계선을 명시하는 예제가 아래에 있다.

 

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

 

위의 예제에서 두개의 경계선을 가지고 있음을 주의하라. 테이블 안에서 <th> 와 <td>요소 모두 다른 경계선을 가지고 있기 때문이다.

 

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

 

테이블 경계의 붕괴

border-collapse 속성은 테이블의 경계가 하나의 경계선으로 합쳐질지 말지 설정하는 것이다.

 

If you only want a border around the table, only specify the border property for <table>:

 

만일 너가 테이블의 경계선에 하나의 경계선을 원한다면, 오직 <table>에 border 속성에 명시하라.

 

 

Table Width and Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

 

테이블의 넓이와 높이

 

테이블의 높이와 넓이는 width, height 속성으로 명시되어질 수 있다.

아래의 예제는 테이블의 100% 넓이를 설정하는 것이고, <td>의 높이는 요소의 50px로 설정하는 것이다.

 

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

The following example left-aligns the text in <th> elements:

 

 

수평적인 정렬

text-align 속성은  <td>, <th>안의 내용물에 대해서 수평적인 정렬을 설정하는 것이다. 

기본적으로 <th>의 내용물은 중앙정렬로 되어있다. 그리고 <td>의 요소는 왼쪽정렬로 되어있다.

다음에 따라오는 에제는 <th>의 안의 텍스트를 왼쪽 정렬하는 예제이다.

 

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:

 

 

수직적인 정렬

vertical-align 속성은 <th>,<td>안의 내용물에 대해서 수직적인 정렬을 설정하는 것이다.

기본적으로 <th><td>안의 요소는 중앙정렬이다.

아래의 따라오는 예제는 <td>요소의 내용물을 bottom으로 설정하는 예제이다.

 

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

 

테이블의 패딩

 

테이블 안의 내용물과 경계선 사이의 공간을 조절하기 위해선 padding 속성을 사용하라.

 

Add the border-bottom property to <th> and <td> for horizontal dividers:

 

수평적인 나눔을 위해서 <th> <td>에 border-bottom 속성을 추가하라

 

Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

 

테이블의 hoverable

 

테이블의 한줄의 마우스가 올라왔을때, 강조를 추가하기 위해선 <tr>셀렉터의 :hover를 사용하라.

 

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

 

얼룩말 모양의 테이블을 만들기 위해선 nth-child()셀렉터를 사용하라. 그리고 모든 짝수 혹은 홀수줄에 배경을 추가하라.

 

 

Table Color

The example below specifies the background color and text color of <th> elements:

 

테이블의 색

 

아래의 예제는 <th>안의 글자의 색과 배경색을 명시한다.

 

 

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

 

반응적인 테이블

 

반응적인 테이블은 스크린이 전체의 내용물을 보여주기 위해 너무 작다면, 수평적인 스크롤바를 보여줄 것이다.

 

 

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

 

테이블을 반응형으로 만들기 위해선, overflow-x:auto가 있는 컨테이너 요소를 추가하라.