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

테이블 수평 정렬

· 8년 전 · 2189

테이블 수평 정렬

이 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>




댓글 작성

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

로그인하기

게시글 목록

번호 제목
3168
3167
3166
3165
3164
3163
3162
3161
3160
3159
3158
3157
3156
3155
3154
3153
3152
3151
3150
3149
3148
3147
3146
3145
3144
3143
3142
3136
3135
3134