- 테이블 행
에 Border-Bottom을 추가하는 방법은 무엇입니까? - border-bottom을 테이블 행
요소로 설정합니다. - 스타일 테이블 요소
- 스타일 'td' 요소
- 스타일 'tr' 요소
테이블 행
에 Border-Bottom을 추가하는 방법은 무엇입니까? 테이블 행에 테두리 하단을 추가하면 더 나은 시각적 경험을 제공하고 사용자의 관심을 끌기 위해 전체 행에 테두리가 추가됩니다.
테이블 행
에 border-bottom을 추가하는 자세한 예는 다음과 같습니다.
border-bottom을 테이블 행
로 설정합니다. , 및 요소를 사용하여 만든 HTML 파일에 3개의 행과 3개의 열을 포함하는 간단한 테이블을 만듭니다.
< 테이블 >
< 트 수업 = '열' >
< 일 > 이름 < / 일 >
< 일 > 상태 < / 일 >
< 일 > 방 번호 < / 일 >
< / 트 >
< 트 수업 = '열' >
< td > 파카르 < / td >
< td > 학생 < / td >
< td > 05 < / td >
< / 트 >
< 트 수업 = '열' >
< td > 오마르 < / td >
< td > 학생 < / td >
< td > 05 < / td >
< / 트 >
< / 테이블 >위의 코드 스니펫에서 CSS에서 나중에 액세스할 수 있도록 테이블 행
에 '행' 클래스를 할당했습니다.
웹페이지는 다음과 같이 표시됩니다.
스타일 테이블 요소
CSS 부분에서 표 요소를 선택하고 텍스트를 가운데에 맞춥니다. 그 후 ' 국경 붕괴 ” 속성을 사용하여 해당 값을 축소하도록 설정합니다.
테이블
{
border-collapse: 축소;
텍스트 정렬: 가운데;
}스타일 'td' 요소
더 나은 시각적 표현을 위해 테이블 데이터 '
' 및 테이블 헤더 ' ' 요소에 20px의 패딩을 제공합니다. td
{
패딩:20px;
}
일
{
패딩:20px;
}출력은 다음과 같습니다.
위의 출력은 20px의 패딩을 표시하고 텍스트를 중앙에 정렬했습니다.
스타일 'tr' 요소
CSS 파일에서 'tr' 선택기 아래에 border-bottom 속성을 추가합니다. 제목 행을 포함하여 테이블의 모든 행에 할당합니다. 예를 들어 값을 2px solid darkcyan으로 설정합니다.
트 {
border-bottom: 2px 솔리드 다크시안;
}위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 표시됩니다.
이것이 모든 테이블 행의 하단에 테두리를 추가하는 방법에 대한 전부입니다.
'. 결론
요소 하단에 테두리를 추가하려면 CSS 속성 border-collapse를 축소로 설정하고 “ ” 요소에 border-bottom 속성을 사용합니다. CSS 속성이 테이블에 테두리를 적용할 수 있습니다. 이렇게 하면 모든 '
' 태그에 테두리 아래쪽을 쉽게 추가할 수 있습니다. - border-bottom을 테이블 행