테스트 사이트 - 개발 중인 베타 버전입니다

테이블 수평 정렬

· 8년 전 · 2190

테이블 수평 정렬

이 text-align속성은 <th> 또는 <td>에 내용의 가로 맞춤 (왼쪽, 오른쪽 또는 가운데)을 설정합니다.

 

기본적으로 <th> 요소의 내용은 가운데 맞춤으로 정렬되며 <td> 요소의 내용은 왼쪽 맞춤으로 정렬됩니다.

 

다음 예제에서는 <th> 요소의 텍스트를 왼쪽 정렬합니다.

 

 

th {

    text-align: left;

}

 

 

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

    border: 1px solid black;

}

 

table {

    border-collapse: collapse;

    width: 100%;

}

 

th {

    text-align: left;

}

</style>

</head>

<body>

 

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

 

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>Peter</td>

    <td>Griffin</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>Lois</td>

    <td>Griffin</td>

    <td>$150</td>

  </tr>

  <tr>

    <td>Joe</td>

    <td>Swanson</td>

    <td>$300</td>

  </tr>

  <tr>

    <td>Cleveland</td>

    <td>Brown</td>

    <td>$250</td>

</tr>

</table>

 

</body>

</html>




댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3015
3014
3013
3012
3011
3010
3008
3007
3006
3005
3004
3003
3002
3001
3000
2999
2998
2997
2996
2995
2994
2993
2992
2991
2989
2988
2987
2986
2985
2984