HTML의 테두리 없는 표

테두리가 없는 표는 HTML 표를 사용하는 웹페이지의 디자인 보기입니다. 테이블을 사용하면 가장 간단한 형태로 많은 정보를 간단하게 표현할 수 있습니다.

• 항목 간 비교를 위해 테두리가 있거나 없는 표입니다.
• 텍스트 및 숫자 정보 모두 표 형식으로 표시될 수 있습니다.

HTML 페이지에서는 테두리 없이 표 형식의 구조가 많이 생성됩니다. 테이블 디자인에서 테두리 사용은 용도에 따라 다릅니다. 다음 HTML을 사용하여 페이지의 표 형식 디자인을 만들 수 있습니다.

예:

<table>
<thead>
<th>S.No</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Profile</th>
<th>Salary</th>
</thead>
<tbody>
<tr>
<td>1</td><td>Jeff Smith</td>
<td>35</td>
<td>Assistant Manager</td>
<td>120,000</td>
</tr>
<tr>
<td>2</td>
<td>Maria Garcia</td>
<td>42</td>
<td>Department Head</td>
<td>85,000</td>
</tr>
<tr>
<td>3</td>
<td>David Rodriguez</td>
<td>37</td>
<td>Senior Sales Executive</td>
<td>45,000</td>
</tr>
<tr>
<td>4</td>
<td>Eyon Shih</td>
<td>32</td>
<td>Sales Executive</td>
<td>35,000</td>
</tr>
</tbody>
</table>

위의 테이블 구조는 아래 스크린샷과 같은 테이블 형식으로 데이터를 표시합니다.

위 스크린샷에서는 테두리를 사용할 수 없습니다. 기본적으로 테이블 디자인에서는 테두리를 사용할 수 없습니다. 테이블에서 테두리를 활성화하려면 스타일 테두리를 추가해야 합니다. 이 테두리에는 테두리 크기(px 등), 테두리 유형(단색, 얇음, 상속 등)과 같은 세 가지 항목이 포함되며 세 번째는 색상(예: 빨간색, 파란색, 검은색, 녹색, 색상 코드).

table{
border : 1px solid #000000;
}

표 테두리를 사용하면 행과 열을 구분하여 표를 더욱 쉽게 표현할 수 있습니다.

테두리 없는 테이블 종류

테두리 없는 테이블 유형은 다음과 같습니다.

1. 네스팅 테이블

네스팅 테이블은 테이블 내부의 테이블을 말합니다. 테이블을 중첩하는 것은 좋은 습관이 아니지만 경우에 따라 테이블 내부에 테이블을 사용해야 하는 경우도 있습니다. 접근성과 혼란스러운 마크업으로 인해 테이블 ​​중첩을 사용하는 것은 터무니없을 수 있습니다.

예:

아래 테이블에서는 상위 테이블 열 안에 두 개의 테이블이 중첩되어 있습니다.

코드:

<table width="80%" cellspacing="0" cellpadding="5">
<thead>
<th>Description</th>
<th>Electricals & Electronics</th>
<th>Computers & Accessories</th>
</thead>
<tbody>
<tr>
<td class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</td>
<td>
<table width="400" cellspacing="0">
<tbody>
<tr>
<td>Television</td>
<td>Washing Machine</td>
<td>Fan</td>
</tr>
<tr>
<td>Induction</td>
<td>Room Heater</td>
<td>Iron</td>
</tr>
<tr>
<td>Inverter Kits</td>
<td>Circuits</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="250" cellspacing="0">
<tbody>
<tr>
<td>Laptop</td>
<td>Monitor</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

스타일:

아래 스타일은 중첩된 테이블 디자인을 더욱 명확하게 표현하기 위해 사용되었습니다.

코드:

<style type="text/css">
table th{
width: 200px;
text-align: center;
}
td.text{
text-align: justify;
padding: 5px;
}
table table, table table td{
border: 1px solid #000;
}
</style>

출력:

경계가 없는 상위 테이블입니다. 하지만 테두리가 포함된 내부 테이블입니다. 명확한 표현을 위해 중첩된 테이블에 테두리가 사용됩니다. 테두리 관련 스타일을 제거하여 중첩된 테이블에서 테두리를 제거할 수 있습니다.

2. 얼룩말 줄무늬 테이블

제브라 스트라이핑 테이블은 줄마다 색상이 다른 테이블을 말합니다. 대체 행의 색상이 다르면 행을 서로 쉽게 구별할 수 있습니다. 색상으로 테이블의 특정 행을 확인하는 것이 더 쉽습니다. jQuery를 사용하여 테이블 태그에 스타일을 추가할 수도 있습니다.

예:

예는 기본적인 것입니다. 여기서 HTML 태그 테이블은 테이블 형식 디자인을 생성한 후 이 테이블을 Zebra Striping 테이블로 만들기 위해 스타일을 추가합니다.

코드:

<table width="50%" cellspacing="0">
<thead>
<th width="100">S.No.</th>
<th width="150">Country Code</th>
<th width="200">Country</th>
<th width="150">Phone Code</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AW</td>
<td>Aruba</td>
<td>297</td>
</tr>
<tr>
<td>2</td>
<td>AU</td>
<td>Australia</td>
<td>61</td>
</tr>
<tr>
<td>3</td>
<td>AT</td>
<td>Austria</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>AZ</td>
<td>Azerbaijan</td>
<td>994</td>
</tr>
<tr>
<td>5</td>
<td>BS</td>
<td>Bahamas</td>
<td>1241</td>
</tr>
<tr>
<td>6</td>
<td>BH</td>
<td>Bahrain</td>
<td>973</td>
</tr>
</tbody>
</table>

스타일:

아래 CSS는 HTML 테이블 Zebra 스트라이프를 만듭니다.

코드:

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

출력:

아래 출력에서 ​​테이블의 행을 서로 다른 색상으로 교체하는 방법을 확인할 수 있습니다.

결론

테이프 없는 테이블은 테이블을 표현하는 방법 중 하나입니다. 테이블 형식은 ul >와 같은 다른 HTML 태그를 사용하여 구현할 수도 있습니다. li, div 등이 있지만 테이블 형식 구조에 테이블을 사용하면 스타일링 작업이 줄어들고 반응형 디자인 접근 방식으로 인해 테이블 ​​형식 디자인에 div를 사용하는 경우가 늘어나고 있습니다.

위 내용은 HTML의 테두리 없는 표의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!