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

테치블 수직 정렬

· 8년 전 · 2218

테치블 수직 정렬

이 vertical-align속성은 <th> 또는 <td>에 내용의 세로 정렬 (위, 아래 또는 가운데)을 설정합니다.

 

기본적으로 표의 내용은 중간에 있습니다 (<th> 및 <td> 요소 모두에 해당).

 

다음 예제에서는 <td> 요소의 세로 텍스트 정렬을 아래쪽으로 설정합니다.

 

 

td {

    height: 50px;

    vertical-align: bottom;

}

 

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

    border: 1px solid black;

}

 

table {

    border-collapse: collapse;

    width: 100%;

}

 

td {

    height: 50px;

    vertical-align: bottom;

}

</style>

</head>

<body>

 

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

<p>This property sets the vertical alignment (like top, bottom, or middle) 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>



댓글 작성

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

로그인하기

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923