다음 문서에서는 수직 테이블 HTML에 대한 개요를 제공합니다. HTML 테이블에서 각각의 새 레코드는 데이터베이스의 행과 열로 삽입됩니다. DB에서는 행이 가로로 간주되고 열이 세로로 간주됩니다. HTML 테이블은 실제로 Bootstrap과 같은 프레임워크에 대한 정보를 표시하는 데 사용됩니다. 우리는 테이블의 모양과 느낌을 쉽게 향상시킬 수 있습니다. 테이블은 웹, 데스크톱 또는 모바일 애플리케이션과 같은 대부분의 앱에 사용됩니다. 또한 최종 사용자에게 정보를 제공하는 것도 중요합니다. 부트스트랩 프레임워크와 기타 다양한 기능을 사용하여 스타일링 기능을 제공하고 테이블과 같은 다양한 요소에 대한 프레젠테이션을 최적화합니다.
일반적으로 우리는
| , | 를 사용하여 테이블을 생성했습니다. 태그. 그 |
|---|---|
| 테이블 헤더를 지정합니다. | HTML의 값을 지정합니다. 아래에서 몇 가지 예를 확인했습니다.
예 #1코드: <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:75%">
<tr>
<th>Name:</th>
<td>Sivaraman</td>
</tr>
<tr>
<th>Mobile:</th>
<td>123456789</td>
</tr>
<tr>
</table>
</body>
</html>로그인 후 복사 출력:
위 예에서는 세로 방향에 두 개의 제목이 표시되어 있습니다. 열 형식으로 표시됩니다. HTML 테이블의 수직 데이터 표시의 기본 예 중 하나입니다. 예시 #2코드: <html>
<head>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
tbody { border-top: 2px solid black; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>
</head>
<table class="scroll">
<thead>
<tr>
<th scope="col" colspan="1">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siva</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>Raman</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>Sivaraman</td>
<td>31</td>
</tr>
</tbody>
</table>
</html>로그인 후 복사 출력:
위의 예에서는 스크롤 옵션을 사용하겠습니다. 기본적으로 수직 스크롤 옵션은 테이블 데이터에 대해 활성화되어 있습니다. 필요한 경우 가로 스크롤 옵션도 활성화했습니다. 예시 #3코드: <style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th, td { display: block; }
</style>
<form >
<table border="1" class="variant-table" >
<tr>
<td style="background-color: #53B3AE;">Name</td>
<td style="background-color: #53B3AE;">Number</td>
<td style="background-color: #53B3AE;">Age</td>
<td style="background-color: #53B3AE;">ID</td>
</tr>
</table>
</form>로그인 후 복사 출력:
위 예에서는 배경색 스타일을 사용하여 열을 강조 표시했습니다. 필요한 부분을 강조하기 위해 전경색도 사용합니다. 다양한 섹션의 테이블또한 HTML 테이블에서 다른 테이블 형식 세트를 사용했습니다. 위의 예에서는 수직 테이블 정렬에 대한 기본 사항을 사용했습니다. 강조 표시된 테이블에 대해 다른 형식 세트가 있습니다. 테두리 및 규칙: 테두리를 사용하면 테이블 주위의 프레임이 강조 표시됩니다. <TABLE border="1" summary="Welcome to My Domain."> <CAPTION>IT</CAPTION> <TR> <TH>Name</TH> <TH>Age</TH> <TH>Number</TH> <TR> <TD>Sivaraman</TD> <TD>30</TD> <TD>8220244056</TD> <TR> <TD>Raman</TD> <TD>31</TD> <TD>123456789</TD> </TABLE> 로그인 후 복사
위 예에서는 경계선을 확인했습니다. 그것은 통치된 국경이다; 점선 등과 같은 다른 테두리도 사용합니다. HTML에서 이미지를 세로로 가운데에 배치하는 방법은 무엇입니까?또한 HTML의 경우 이미지를 수직으로 정렬합니다. CSS 스타일을 사용하려면 스타일 태그에 설정을 할당해야 하고 이미지를 세로 모드로 표시했습니다. 코드: <html> <body bgcolor="#ffffff"> <center> <table width="100%" height="100%" bgcolor="#a3ddc4"> <tr> <td align="center"> <table width="800" height="500" bgcolor="#ff6f6f"> <tr> <td> </td> </tr> </table> </td> </tr> </table> <!-- For Internet Explorer 3--> <center> </body> </html> 로그인 후 복사 출력:
위의 예는 이미지가 세로 모드임을 보여줍니다. 필요한 경우 방향도 변경합니다. 세로 모드를 사용하면 공간이 줄어들고, 가로 모드에 비해 페이지의 다른 내용이 단일 페이지 자체에 표시됩니다. 외부 HTML 테이블은 테두리를 제외한 웹 브라우저 영역인 HTML 테이블을 만들고 전체 영역은 HTML 테이블 셀이 됩니다. 외부 및 내부 HTML 테이블 셀은 상위 및 하위 테이블 행의 속성을 정렬하기 위한 기본값을 상속합니다. 또한 |
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
