HTML 테이블의 중심을 설정하는 방법
- PHPz원래의
- 2023-04-25 10:28:4710753검색
HTML은 웹 페이지를 만드는 데 널리 사용되는 하이퍼텍스트 마크업 언어입니다. 웹 디자인에서 테이블은 데이터를 표시하는 데 매우 유용한 요소입니다. 테이블을 디자인할 때 일반적으로 필요한 것은 테이블을 중앙에 배치하는 것입니다. HTML에서 표를 중앙에 배치하는 방법은 다음과 같습니다.
1. CSS 스타일시트 사용
HTML로 테이블을 생성한 후 CSS 스타일시트를 사용하여 테이블을 쉽게 중앙에 배치할 수 있습니다. 스타일시트에서 "margin: auto" 속성을 사용하여 표를 중앙에 배치할 수 있습니다.
예를 들어 다음 코드는 표 너비를 80%로 설정하고 페이지 중앙에 배치합니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>小明</td>
<td>001</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>002</td>
<td>95</td>
</tr>
</table>
</body>
</html>
위 코드에서는 테이블을 생성하고 너비를 80%로 설정했습니다. 다음으로 "margin: auto" 속성을 사용하여 테이블을 중앙에 배치합니다.
2. HTML 속성 사용
CSS 스타일 시트를 사용하는 것 외에도 HTML 테이블 요소에 직접 속성을 설정하여 테이블을 중앙에 배치할 수도 있습니다. 다음은 HTML에서 테이블을 중앙에 배치하는 방법에 대한 샘플 코드입니다.
<!DOCTYPE html> <html> <head> <title>HTML表格居中</title> </head> <body> <center> <table border="1"> <tr> <th>姓名</th> <th>学号</th> <th>成绩</th> </tr> <tr> <td>小明</td> <td>001</td> <td>90</td> </tr> <tr> <td>小红</td> <td>002</td> <td>95</td> </tr> </table> </center> </body> </html>
위 코드에서는 테이블 외부에 HTML
요약
HTML의 표는 일반적인 웹 디자인 요소이며 중앙에 정렬된 표는 일반적인 디자인 요구 사항입니다. 표를 중앙에 배치하려면 CSS 스타일시트나 HTML 속성을 사용할 수 있습니다. CSS 스타일시트를 사용하려면 몇 가지 기본 기술이 필요하지만 확장성이 향상되며 오랫동안 사용되어 온 모범 사례입니다. HTML 속성을 사용하여 테이블을 중앙에 배치하는 것이 더 간단하지만 복잡한 웹 디자인에서는 문제가 발생할 수 있습니다. 따라서 웹페이지를 디자인할 때 어떤 방법을 사용할 것인지 고려해야 합니다.
위 내용은 HTML 테이블의 중심을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!