article search result of 'ALIGN' : 2

  1. 2014.04.12 [html/css] table 중앙 정렬하기
  2. 2014.03.05 table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (7)

[html/css] table 중앙 정렬하기

 

 

[html/css] table 중앙 정렬하기

부제: align, center를 사용하지 않고 css로 table 정렬하기

 

 

제가 10년 전에 html을 배울 당시에는,  문서를 정렬할 때 <center>와 <align>을 썼던 기억이 나는데요

 

이 둘은 일부 브라우저에서 지원이 되긴 하지만,  다른 브라우저에서는 깨져 보일 수 있고

 

현재는 소위 사용을 권장하지 않는 퇴화(deprecated) 태그라고 부르더군요.

 

이전 시간에는 inline 요소를 정렬하는 text-align에 대해 배웠는데요

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

 

오늘은 block 요소인 table 정렬하는 방법에 대해 알아보겠습니다.

 

 

table 정렬하기

 

table을 오른쪽 왼쪽 정렬하기는 쉽습니다. float: left, float: right 속성을 사용하면 됩니다.

 

하지만 float에는 중앙 정렬 값이 없습니다.

 

 [css 기초] float 속성에 대하여

 

 

table 중앙 정렬 방법

 

 

1. width 값을 설정함

2. margin: auto   혹은         margin-right: auto; margin-left: auto; 로 설정함.

3. auto를 쓰려면 doc type(문서 타입)을 선언해야 함.

 

*주의: width: 100% 는 가로 화면 전체를 차지하므로 auto값이 적용되지 않음.

* IE에서는 margin: auto 값을 쓰려면 항상 doctype(문서 타입)을 선언해주어야 합니다.

 

 margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

 

*table 안에 있는 요소(글자나 이미지 등)를 정렬하려면 text-align 속성을 사용하면 됩니다.

 

 

그럼 실제 html을 작성하여 css에 스타일을 적용해 보겠습니다

 

table.htm

 <!DOCTYPE html>
<html>
 <head>
<style type="text/css">
 
table, td{
border: 1px solid red
}

table{
width:60%;
height: 100px;
margin: auto;

text-align: center;
}

</style>
 </head>

 

<body>
 <table>
<tr>
<td>월요일</td>
<td>화요일</td>
<td>수요일</td>
</tr>
</table>
 

</body>
</html>

 

실행 화면입니다:

 

테이블은 width 60% 에 margin: auto를 설정해 화면 중앙에 배치했고

 

월요일, 화요일, 수요일은 text-align: center로 중앙 정렬했습니다.

 

 

 

인라인 방식으로 스타일을 적용할 때는 다음처럼 하면 됩니다.

 

table2.htm

 
<!DOCTYPE html>
<html>
 <head>
 </head>

<body>
 
 <table style="border: 1px solid red; width:60%; height: 100px; margin: auto; text-align: center;">
<tr>
<td style="border: 1px solid red;">월요일</td>
<td style="border: 1px solid red;">화요일</td>
<td style="border: 1px solid red;">수요일</td>
</tr>
</table>
 

</body>
</html>

 

 

 

 

 다음 시간에는 div 정렬하는 방법을 써 볼게요~

 

[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

DIV 태그를 이용하여 레이아웃 만들기

 

지구별에
css 2014. 4. 12. 09:00

댓글을 달아 주세요

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리



표를 만드는 table 태그, tr 태그, th 태그, td 태그와 table 속성 정리



오늘은 <table> 태그에 대해 알아 보겠습니다.

 

<table>은 표를 만드는 태그인데요


아래 그림처럼 작은 표를 만드는 데 쓰일 수 있고,

 

 

밑에 처럼, 홈페이지의 전체 구성(layout)을 만드는 데도 사용될 수 있어요.

 

하지만 원래 table 태그는,  위 그림처럼 데이터를 담고 있는 표를

 

만들기 위한 목적이라고 합니다~

 

그래서 홈페이지 전체 구성이나 배치를 위해선, <div>태그를 사용하는 것이 좋으며 

 

앞으로 다룰 css에서 더 자세히 알아보도록 하겠습니다.

 

 CSS란? (HTML과 CSS의 차이, CSS 작성법)


 

 

 

html 기초 태그에 대해서도 썼듯, <table> 역시 </table>과 쌍을 이루어 사용합니다.


HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)


 

<table>은 각각 셀로 만드는데  header cell과 standard cell로 나누어집니다.

<th>를 header cell이라 부르며 나머지를 standard cell로 부릅니다.

 

<th>내용</th>: table head 약자로, 표의 제목을 쓰는 역할  (기본값은 굵은 글씨체에, 중앙 정렬)

<tr> 내용 </tr> : table row 약자로, 가로줄을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)

<td>내용 </td>:  table data 약자로, 셀을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)

 

 

사용 예 

 <html>
<head>
</head>
<body>

<table border="1">
  <tr>
    <th>번호</th>
    <th>이름</th>
  </tr>
  <tr>
    <td>1</td>
    <td>김영희</td>
  </tr>
  <tr>
    <td>2</td>
    <td>김순자</td>
  </tr>
</table>

</body>
</html>

 

그러면 아래 그림처럼 표시됩니다.

(번호, 이름 부분은 header cell로 굵은 글씨체에 중앙 정렬되었고,

  1 김영희, 2 김순자는 standard cell로 보통 글씨체에 왼쪽 정렬되었습니다)


 


 

<table> 태그와 함께 사용될 수 있는 속성은 다음과 같습니다.


table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등

 

 

① colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정  

 

사용 예 :

 

 <table border="1" >

  <tr>

    <td colspan="2">병아리반</td>
   </tr>
  <tr>

      <td> 1</td>

      <td>김영희</td>
  </tr>
  <tr>

     <td> 2</td>
    <td>김순자</td>
 </tr>
</table>

 

colspan="2" 로 설정했을 때 화면

 

 

② rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정


사용 예 :

 

 

 <table border="1" >

  <tr>

    <td rowspan="3">병아리반</td>
    <td>김순자</td>
  </tr>
  <tr>
    <td>김영희</td>

  </tr>

  <tr>
    <td>이철수</td>
  </tr>
</table>


 

rowspan="3" 으로 설정했을 때 화면 

 

③ border : 테이블 경계선 굵기를 지정(예: border="10")

④ width : 너비를 지정(픽셀이나, %)

⑤ height : 높이를 지정(픽셀이나, %)

 

아래는 border ="10" width="100%" 설정한 화면입니다.

width와 height는 픽셀로 설정(width="50px")하거나, %로 설정할 수 있습니다.


 

⑥ cellpadding : 셀과 경계선 사이의 여백(그림 A는 cellpadding="10"으로 지정한 화면)

⑦ cellspacing : 셀과 셀 사이의 여백(그림 B는 cellspacing="10"으로 지정한 화면)

 

        그림 A                            그림 B  


 

⑧ align : 셀의 가로줄을   오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬 

          (그림 C는 align="left" 설정 화면)

⑨ valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬

           (그림 D는 valign="middle" 설정 화면)

 

                                                                           그림 C

 

                                                                              그림 D


⑩ bgcolor : 배경색 지정

bgcolor 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있어요

 

아래화면은 <table bgcolor="green"> 으로 지정한 화면.

 

⑪ bordercolor: 경계선 색깔 지정

밑에는<table border="1" bordercolor="red">으로 지정한 화면 





위에서 <table> 태그의 여러 속성들에 대해 살펴봤는데

위 속성 들 중에는 HTML5에서 지원되지 않는 속성도 있습니다.


 

HTML5에서 지원되지 않는 속성 :
align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width 


그래서 위의 속성들은 css를 통해 지정하는 것이 바람직합니다(아래 링크 참조)

 

    

css로 table 속성 지정(너비,높이,글자색,배경색,선그리기)

 

css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

display 속성을 사용하여 table만들기 (css로 table, tr, td)

 

[html/css] table 중앙 정렬하기

 

 

「추천글」

 

[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

[css] - DIV 태그를 이용하여 레이아웃 하기

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) 

지구별에
html 2014. 3. 5. 22:11

댓글을 달아 주세요

  1. 2014.05.21 00:28  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 지구별에 2014.05.21 09:58 신고  수정/삭제

      한 페이지에 doctype은 하나만 선언해야 하지만, 링크를 클릭했을 때 새 페이지가 열리는 거라면 독립된 문서이니 다른 doctype 선언해도 문제가 없는 것 같습니다..

  2. 2014.09.27 00:15  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 지구별에 2014.09.29 09:26 신고  수정/삭제

      글쎄요 왜 작동하는지는 저도 잘 모르겠네요.
      하지만 html5에서부터 지원하지 않으므로 다음 버전에서도
      이 속성들이 쓰이지 않을 가능성이 높다고 보시면 됩니다.
      되도록 속성 지정은 css를 통해서 하시는 게 좋습니다

  3. eunzzoi 2014.10.27 11:04  수정/삭제  댓글쓰기

    읽었던 내용인지 모르고 다시 읽다가 보니 오타가 있어서요~
    colspan 내용 중 '김영희'가 html에서 '김순자'로 되어있어요 ㅋ
    아 그리고 나중에 혹시 책 펴내실건가요?
    내용들이 마음에 들어서 책 나온다면 사고 싶어요^^ㅋ

    • 지구별에 2014.10.27 11:14 신고  수정/삭제

      아...네 시간 될 때 수정해 놓겠습니다. 감사해요..^^
      책은 아직 당장은 어려울 듯하고... 1~2년 내에 생각해 보고 있어요. 자주 방문해 주세요~^^

  4. Carl 2017.12.20 16:31  수정/삭제  댓글쓰기

    감사히 보고 갑니다.^^

Powerd by Tistory, designed by criuce