HTML에서 테이블을 맨 위로 정렬

HTML 테이블은 데이터로 구성된 테이블 행으로 구성됩니다. 이 자습서에서는 테이블 데이터를 오른쪽 상단에 정렬하는 방법을 소개합니다.

vertical-align 및 text-align CSS 속성을 사용하여 HTML의 테이블 데이터 정렬

HTML의 테이블은 행과 열로 구성됩니다. <table> 태그를 사용하여 HTML로 테이블을 생성합니다. <tr> 태그는 테이블 행을 생성하는 데 사용되며 <td> 태그는 테이블의 데이터를 채우는 데 사용됩니다.

테이블 데이터가 있는 상자를 셀이라고도 합니다. 셀은 테이블의 빌딩 블록입니다. 이 기사에서는 테이블 데이터를 오른쪽 셀의 상단에 맞추는 방법을 다룰 것입니다.

vertical-align 및 text-align CSS 속성을 사용하여 테이블 데이터를 셀 오른쪽 상단에 정렬합니다. 먼저 vertical-align 속성을 소개하겠습니다.

속성은 지정된 요소의 수직 정렬을 정의합니다. 요소는 인라인 또는 인라인 블록 요소 및 테이블 셀일 수 있습니다.

속성은 다양한 옵션을 사용합니다. 일부는 baseline, length, sub, super, top 등입니다. 속성의 기본값은 baseline입니다.

두 가지 다른 상황에서 vertical-align 속성을 사용할 수 있습니다. 앞서 언급했듯이 인라인 요소를 수직으로 배치하는 데 사용할 수 있습니다.

또 다른 방법은 속성을 사용하여 표의 셀 내용을 정렬하는 것입니다. 예에서 우리는 후자의 맥락에 대해 논의할 것입니다.

text-align 속성은 지정된 요소에서 텍스트의 수평 정렬을 설정합니다. 일부 속성 옵션은 left, right, center, justify 등이 있습니다. 옵션에서 분명히 알 수 있듯이 text-align 속성을 사용하여 텍스트의 위치를 ​​설정할 수 있습니다.

이 두 속성을 사용하여 테이블 데이터를 오른쪽 상단에 정렬할 수 있습니다. vertical-align 속성의 top 옵션은 요소를 줄에서 가장 높은 요소의 상단에 정렬합니다.

표 셀의 경우 내용은 셀 테두리 바로 아래에 위치합니다. 마찬가지로 right 속성은 텍스트를 셀의 오른쪽에 정렬합니다.

예를 들어 두 개의 행과 두 개의 열이 있는 테이블을 만듭니다. Create, Read, Update 및 Delete로 셀을 채웁니다.

CSS에서 table 요소의 자식으로 td 요소를 선택합니다. 셀의 높이와 너비를 200px로 설정합니다.

셀에 2px solid #000의 테두리를 적용합니다. 다음으로 vertical-align 속성을 top으로, text-align 속성을 right로 설정합니다.

결과적으로 셀의 내용은 셀의 테두리 바로 아래 오른쪽에 배치됩니다. 이를 통해 vertical-align 및 text-align CSS 속성을 사용하여 테이블 데이터를 오른쪽 상단에 정렬할 수 있습니다.

예제 코드:

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>

table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}