HTML 테이블은 웹 페이지에 테이블 데이터를 표시하는 데 사용됩니다. 그들은 조직화 된 방식으로 정보를 표시하는 데 유용하며 웹 사이트의 모양과 스타일에 맞게 CSS를 사용하여 스타일링 할 수 있습니다. 이 튜토리얼은 HTML 테이블을 만들고 스타일을 추가하여 반응적이고 모바일 친화적 인 스타일을 추가하는 기본 사항을 다룹니다.
키 포인트
<table> 태그를 만들어야합니다. 각 <tag tag> 태그 내에서 테이블의 셀을 정의하는 하나 이상의 <code><tr> 태그를 만들 수 있습니다. 다음은 기본 HTML 테이블의 예입니다.
<code><td>
<a> 이것은 두 개의 행과 3 개의 열이있는 테이블을 만듭니다. 각 셀은 그 내용을 보여줍니다.
CodePen 예제 (실제 코디펜 링크로 바꾸십시오)
<and> 행과 열을 추가하십시오
<new> 테이블에 새 행을 추가하려면 새 태그 만 만들면됩니다. 테이블에 새 셀을 추가하려면 기존 태그 내에 새 태그를 만들 수 있습니다. 다음은 4 개의 행과 3 개의 열이있는 예제 테이블입니다.
<li>
<a> 이것은 4 개의 행과 3 개의 열이있는 테이블을 만듭니다. </a>
</li>
<m> html 테이블 스타일을 설정하십시오
<c> CSS를 사용하여 HTML 테이블을 스타일로 만들어 모양을 변경할 수 있습니다. 테이블 스타일에 사용되는 가장 일반적인 CSS 속성 중 일부에는 테이블, 충전 및 배경색이 포함됩니다. 다음은 경계와 배경색을 사용하여 테이블을 스타일링하는 방법의 예입니다.
<li>
<a> 이것은 검은 색 테이블과 밝은 회색 배경색으로 8 픽셀로 채워진 테이블을 만듭니다. <code><caption></caption>
CodePen 예제 (실제 코디펜 링크로 바꾸십시오) display
CodePen 예제 (실제 코디펜 링크로 바꾸십시오)
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
아니요! 테이블은 HTML의 중요한 부분입니다. 의미 론적이고 접근 가능한 방식으로 표 데이터를 표시하는 데 필수적입니다. 월드 와이드 웹 초기에 CSS가 시작되기 전에 테이블은 웹 디자인을 레이아웃하는 방법을 제공했지만 이는 의도 된 목적이 아니 었습니다. 고맙게도, 그 시절은 길어졌습니다 (대부분, 대부분의 이메일 클라이언트의 경우) 이제 HTML 테이블이 실제로 데이터 표시에있어 매우 중요한 방식에 집중할 수 있습니다. 
는 테두리 테이블을 만듭니다. 그러나이 특성은 HTML5에서 지원되지 않습니다. 대신 CSS를 사용하여 테두리를 추가 할 수 있습니다. 예를 들어 다음 코드를 사용하여 테두리를 추가 할 수 있습니다. <table>
"테이블", "TH"및 "TD"요소를 위치시켜 HTML 테이블을 스타일링하는 데 사용될 수 있습니다. 예를 들어 다음 코드를 사용하여 테이블 제목 (TH) 및 테이블 데이터 (TD)의 배경색을 변경할 수 있습니다. 충전물을 추가하고 텍스트 색상을 변경하는 등을 추가 할 수도 있습니다. <code><table border="1">
<h> HTML 테이블을 응답하는 방법은 무엇입니까? <code>table, th, td {border: 1px solid black;}
CSS는 HTML 테이블을 반응하는 데 사용될 수 있습니다. 테이블의 너비가 화면 크기보다 작을 때 "오버 플로우"속성을 사용하여 테이블에 스크롤 막대를 추가 할 수 있습니다. 예를 들어, 다음 코드를 사용하여 테이블을 응답 할 수 있습니다.
HTML 테이블에 제목을 추가하는 방법은 무엇입니까?
. th {background-color: #f2f2f2;} td {background-color: #ffffff;}
table {width: 100%; overflow: auto;}
위 내용은 HTML 테이블을 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
