HTML 테이블의 행에 영향을 주지 않고 열 사이에 공백을 추가하는 방법은 무엇입니까?
패딩 왼쪽 및 오른쪽 속성은 테이블의 전체 레이아웃에 영향을 주지 않고 열 사이에 간격을 추가하는 데 사용됩니다. 이 속성을 사용하면 개발자가 여분의 간격을 추가할 수 있으며 이 간격은 행에 영향을 주지 않습니다.
아래 단계를 따르십시오.
1단계: 테이블 구조 생성
HTML 파일에 4개의 행과 3개의 열을 포함하는 테이블이 있다고 가정해 보겠습니다.
< 테이블 >
< 트 >
< 일 > 이름 < / 일 >
< 일 > 수업 < / 일 >
< 일 > 도시 < / 일 >
< / 트 >
< 트 >
< td > 남자 < / td >
< td > 비에스켐 < / td >
< td > 런던 < / td >
< / 트 >
< 트 >
< td > 알렉산더 < / td >
< td > 학사 수학 < / td >
< td > 도쿄 < / td >
< / 트 >
< 트 >
< td > 요셉 < / td >
< td > 학사 CS < / td >
< td > 뉴욕 < / td >
< / 트 >
< / 테이블 >
위의 코드를 실행한 후 웹 페이지는 다음과 같습니다.
출력에서 테이블 구조가 생성되었음을 확인합니다.
2단계: 수평 패딩 적용
왼쪽에서 열 사이에 간격을 추가하려면 ' 패딩 왼쪽 ” CSS 속성. 이 속성을 적용하면 데이터가 오른쪽 정렬처럼 보입니다. 그 이유는 패딩이 왼쪽에서만 적용되기 때문입니다.
이제 인라인 방법을 사용하여 적용할 수 있는 스타일의 CSS 부분에서 'td' 요소를 선택합니다. 그런 다음 '의 패딩을 추가하십시오. 50픽셀 ” 더 나은 시각화 목적을 위해 간격을 추가하고 테두리 속성을 추가합니다.
td {패딩-왼쪽: 50px;
국경 : 2px 솔리드 레드;
}
코드를 실행한 후 웹 페이지는 다음과 같습니다.
출력에는 테이블의 열 사이에 공백이 추가된 것으로 표시됩니다.
이제 오른쪽에서 패딩을 설정하려면 ' 패딩 오른쪽 ” 속성이 활용됩니다. 같은 방식이지만 이제 셀 데이터는 ' 왼쪽 정렬 '. 코드는 다음과 같습니다.
td {패딩-왼쪽: 50px;
국경 : 2px 솔리드 레드;
}
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
출력은 오른쪽에 패딩을 적용하여 열 사이의 공간이 증가했음을 확인합니다.
3단계: 패딩 왼쪽과 오른쪽 조합
위의 단계에서와 같이 두 경우 모두 데이터가 중앙 정렬되지 않아 데이터가 전문적이지 않습니다. 디자인 감각을 깨뜨리지 않고 눈에 띄도록. 아래와 같이 두 속성을 동시에 사용할 수 있습니다.
td {오른쪽 패딩: 60px;
패딩-왼쪽: 60px;
국경 : 2px 솔리드 레드;
}
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
출력은 열 사이에 공백이 추가되고 데이터도 가운데 정렬됨을 확인합니다.
결론
왼쪽 및 오른쪽 패딩 속성을 사용하여 테이블 열 사이의 공간을 추가할 수 있습니다. 이러한 속성은 오른쪽 및 왼쪽 방향에서 셀에 추가 공간을 추가합니다. 두 속성을 동시에 또는 별도로 사용할 수 있습니다. 이 문서에서는 행에 영향을 주지 않고 테이블 열 사이에 간격을 추가하는 방법을 성공적으로 보여 주었습니다.