메뉴 건너뛰기

프로그램언어

조회 수 4856 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

[방법 1]

 

To center a table, you need to set the margins, like this:

  table.center {margin-left:auto; margin-right:auto;}

And then do this:

  <table class="center">
    ...
  </table>

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however,

needs you to add this to your CSS as well:

  body {text-align:center;}
 
[방법2]

If you want your table to be a certain percentage width, you can do this:

  table#table1 {width:70%; margin-left:15%; margin-right:15%;}

And then in your HTML/XHTML, you would do this:

  <table id="table1">
    ...
  </table>

 

Note that I was using an id to describe the table. You can only use an id once on a page. If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS:

  table.center {width:70%; margin-left:15%; margin-right:15%;}

And this in your HTML:

  <table class="center">
    ...
  </table>
  <table class="center">
    ...
  </table>
[방법3]
 

If you want your table to be of fixed width, define your CSS like this:

div.container {width:98%; margin:1%;}
table#table1 {text-align:center; margin-left:auto; margin-right:auto; width:100px;}
tr,td {text-align:left;}

Set "width:100px" to whatever width you need.

"text-align: center" is there for Internet Explorer, which won't work without it. Unfortunately, "text-align: center" will center all the text inside your table cells, but we counter that by setting "tr" and "td" to align left.

In your HTML, you would then do this:

  <div class="container">
    <table id="table1">
      ...
    </table>
  </div>

List of Articles
번호 제목 날짜 조회 수
32 HTML 목록 태그와 CSS를 활용하여 깔끔한 목록 스타일을 만드는 방법 / CSS list-style file 2016.12.22 6174
31 하이퍼링크 & 링크이미지에 점선을 죽임 2016.12.23 5748
30 폼을 투명하게 2016.12.23 5234
29 파비콘 없어서 계속 서버에 로그 쌓이는 경우 2019.04.29 819
28 텍스트 ime모드 속성 2016.12.23 4961
27 중급 사용자를 위한 CSS 선택자에 관한 지식 / CSS에서 마우스 동작을 감지하는 방법 2016.12.22 4960
26 인쇄할때 페이지 나누는 br 태그 2016.12.23 4775
25 웹 브라우저에 [가로 스크롤 안생기게 하기] 2016.12.23 15128
24 모바일 체크박스 변경 마크업 2015.02.03 4968
23 모바일 실제 해상도와 device-width 2015.02.03 4722
22 메뉴 텍스트(text)에 그림자 효과 주기 2014.02.27 5789
21 말줄임 2016.12.22 4724
20 링크 오버속성+버튼 디자인 2016.12.23 4664
19 둥근 모서리 박스 css 2014.02.27 5854
18 네이버 나눔글꼴 적용 2014.03.01 6666
17 기본적으로 보이는 스크롤바를 없애기 2016.12.23 5118
16 light박스 css로 흉내내기 2016.12.22 4618
15 input box 테두리 없애기 2016.12.23 9667
14 IIS7 에서 woff MIME 등록하기. 2015.02.03 4726
» css를 이용한 테이블 가운데 정렬 2016.12.22 4856
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved