메뉴 건너뛰기

프로그램언어

조회 수 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>

  1. HTML 목록 태그와 CSS를 활용하여 깔끔한 목록 스타일을 만드는 방법 / CSS list-style

  2. No Image 23Dec
    by
    2016/12/23 Views 5748 

    하이퍼링크 & 링크이미지에 점선을 죽임

  3. No Image 23Dec
    by
    2016/12/23 Views 5234 

    폼을 투명하게

  4. No Image 29Apr
    by
    2019/04/29 Views 819 

    파비콘 없어서 계속 서버에 로그 쌓이는 경우

  5. No Image 23Dec
    by
    2016/12/23 Views 4961 

    텍스트 ime모드 속성

  6. No Image 22Dec
    by
    2016/12/22 Views 4960 

    중급 사용자를 위한 CSS 선택자에 관한 지식 / CSS에서 마우스 동작을 감지하는 방법

  7. No Image 23Dec
    by
    2016/12/23 Views 4775 

    인쇄할때 페이지 나누는 br 태그

  8. No Image 23Dec
    by
    2016/12/23 Views 15131 

    웹 브라우저에 [가로 스크롤 안생기게 하기]

  9. No Image 03Feb
    by
    2015/02/03 Views 4968 

    모바일 체크박스 변경 마크업

  10. No Image 03Feb
    by
    2015/02/03 Views 4722 

    모바일 실제 해상도와 device-width

  11. No Image 27Feb
    by
    2014/02/27 Views 5806 

    메뉴 텍스트(text)에 그림자 효과 주기

  12. No Image 22Dec
    by
    2016/12/22 Views 4724 

    말줄임

  13. No Image 23Dec
    by
    2016/12/23 Views 4664 

    링크 오버속성+버튼 디자인

  14. No Image 27Feb
    by
    2014/02/27 Views 5854 

    둥근 모서리 박스 css

  15. No Image 01Mar
    by
    2014/03/01 Views 6666 

    네이버 나눔글꼴 적용

  16. No Image 23Dec
    by
    2016/12/23 Views 5118 

    기본적으로 보이는 스크롤바를 없애기

  17. No Image 22Dec
    by
    2016/12/22 Views 4618 

    light박스 css로 흉내내기

  18. No Image 23Dec
    by
    2016/12/23 Views 9667 

    input box 테두리 없애기

  19. No Image 03Feb
    by
    2015/02/03 Views 4726 

    IIS7 에서 woff MIME 등록하기.

  20. No Image 22Dec
    by 조쉬
    2016/12/22 Views 4856 

    css를 이용한 테이블 가운데 정렬

Board Pagination Prev 1 2 Next
/ 2

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved