CSS / 표(table) 꾸미기 / 정렬하기

표와 관련된 정렬

표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은

  • 표 : 왼쪽 정렬
  • 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬
  • 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬
  • 셀 안의 내용 세로 정렬 : 가운데 정렬

입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Lorem</th>
          <th>Ipsum</th>
          <th>Dolor</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
          <td>Dolor</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

표 정렬

표를 가운데 정렬할 때는 margin 속성을 사용합니다. 좌우 margin 속성값을 auto로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

표를 오른쪽 정렬할 때는 float 속성을 사용합니다. 속성값을 right로 정합니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
    float: right;
  }
</style>

셀 안의 내용 가로 정렬

셀 안의 내용 가로 정렬은 text-align 속성을 사용합니다. 왼쪽 정렬은 left, 가운데 정렬은 center, 오른쪽 정렬은 right가 속성값입니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
  }
  th {
    text-align: left;
  }
  td {
    text-align: right;
  }
</style>

셀 안의 내용 세로 정렬

셀 안의 내용 세로 정렬은 vertical-align 속성을 사용합니다. 위쪽 정렬은 top, 가운데 정렬은 middle, 아래쪽 정렬은 bottom이 속성값입니다.

<style>
  table, th, td {
    border: 1px solid #bcbcbc;
  }
  table {
    width: 400px;
    height: 200px;
  }
  th {
    vertical-align: top;
  }
  td {
    vertical-align: bottom;
  }
</style>

Related Posts

CSS / Grid / order

CSS / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...

CSS / 체크박스 꾸미는 방법

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / background-position / 배경 이미지의 위치를 정하는 속성

CSS / background-position / 배경 이미지의 위치를 정하는 속성

개요 background-position은 배경 이미지의 위치를 정하는 속성입니다. 기본값 : 0% 0% 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-position: x-position y-position | initial | inherit x-position y-position : 가로 위치와 세로 위치를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 위치 값으로 사용할 수 있는 것은 다음과 같습니다. 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 ...

CSS / placeholder의 색, 글자 모양 등 꾸미기

CSS / placeholder의 색, 글자 모양 등 꾸미기

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / radial-gradient - 원형 그라데이션 효과 만들기

CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...