집 >웹 프론트엔드 >HTML 튜토리얼 >HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예

HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예

寻∝梦원래의: 2018-08-30 10:47:544332검색

이 글에서는 주로 HTML 테이블 테이블 태그의 테두리 사용법에 대해 설명합니다. 일반적으로 테두리 방법을 설명하기 위해 테두리 선을 1로 설정합니다. 다음으로 HTML 테이블 테이블 태그의 테두리 사용에 대한 기사를 살펴보겠습니다.

먼저 테이블이 정의되는 방법을 살펴보겠습니다.

테이블은

각 테이블에는 여러 행( 태그로 정의됨)이 있으며, 각 행은 여러 셀(

태그로 정의됨)로 나뉩니다. 문자 td는 테이블 데이터, 즉 데이터 셀의 내용을 나타냅니다. 데이터 셀에는 텍스트, 그림, 목록, 단락, 양식, 수평선, 표 등이 포함될 수 있습니다.

자, 간단한 테이블을 만들어 보겠습니다:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<table border="1" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>
</body>
</html>

이것은 그림과 같이 3개의 행과 3개의 열로 구성된 간단한 테이블입니다.

HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예

HTML을 처음 접하는 많은 사람들을 위해 table

일반적으로 테이블을 사용할 때 항상

과 같은 테두리 속성을 지정합니다. 효과는 위 그림과 같습니다.

테두리를 찾을 수 있습니다. 물론 여기서 "매우"라는 "너비"는 테이블 테두리의 너비가 아닙니다. 표시되는 너비는

사이의 간격으로 인해 발생합니다. 따라서 테이블의 셀 간격 속성만 수정하면 됩니다. 즉:

<table border="1px" cellspacing="0px" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>

효과는 다음과 같습니다.

HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예

처음에 테이블에 border=1을 추가한 이유는 기본 검정색 테이블 스타일에 라인이 추가되었습니다. TD와 테이블에는 기본적으로 검은색 테두리가 있습니다. 따라서 테두리가 정상적으로 표시될 수 있도록 이 문제를 완전히 해결해야 한다면 테이블에 색상을 추가하세요.

검은색은 눈에 띄지 않으니 빨간색으로 변경합니다

HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예

요약: 그림과 같이 검은색 테두리가 빨간색으로 변합니다. 내용을 추가하고 내부의 크기도 조정할 수 있으며, 내부의 텍스트도 조정할 수 있습니다. 즉, 테이블은 매우 유용합니다. 이번 글에서는 테이블 테이블의 테두리에 대해 소개했습니다. 물론, 실제 애플리케이션에서는 특별한 경우를 제외하고는 테두리를 거의 사용하지 않습니다. 일반적으로 경계선 설정을 0으로 변경하여 경계선이 없도록 합니다. 그러나 우리 강의에서는 기본적으로 경계선이 1과 같아야 보기 및 조정이 편리합니다.

【에디터 추천】

html p 태그에 a 태그가 포함될 수 있나요? html p 태그 기능 설명

html a 태그를 사용하는 방법은 무엇인가요? html a 태그 사용 요약

위 내용은 HTML 테이블의 테두리를 만드는 방법은 무엇입니까? HTML 테이블 생성 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：ins 태그를 사용하여 텍스트를 삽입하고 del 태그를 사용하여 HTML에서 텍스트를 함께 삭제하는 방법은 무엇입니까? (예제 포함)다음 기사：ins 태그를 사용하여 텍스트를 삽입하고 del 태그를 사용하여 HTML에서 텍스트를 함께 삭제하는 방법은 무엇입니까? (예제 포함)