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가 있는 컨테이너 요소를 추가하라.
'영어공부' 카테고리의 다른 글
CSS Layout - width and max-width (0) | 2020.01.15 |
---|---|
CSS Layout - The display Property (0) | 2020.01.14 |
CSS Lists (0) | 2020.01.11 |
CSS Links (0) | 2020.01.11 |
How To Add Icons (1) | 2020.01.09 |