기술나눔

[HTML 입문] 10강 - 테이블, 즉 테이블 태그

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

이 섹션에서는 HTML의 테이블에 대해 설명합니다. 예를 들어 엑셀과 같은 학생 성적표를 셀 단위로 흔히 볼 수 있습니다.

테이블의 라벨 이름은 다음과 같습니다. 테이블 。

목차

1 테이블의 일부 하위 태그

1.1 헤더 영역

1.2 테이블 콘텐츠 영역

1.3 행과 열

2 약간의 연습

2.1 간단한 성적표 만들기

2.2 경계선 추가

2.3 크로스 행

2.4 교차 기둥

1 테이블의 일부 하위 태그

1.1 헤더 영역

예를 들어 성적 증명서의 상단에는 제목이 있어야 합니다.학생 아이디、학생 이름、주제、점수、종합 결과이 필드 맞죠.

이러한 필드는 thead 태그가 필요한 테이블 헤더에 배치됩니다.

1.2 테이블 콘텐츠 영역

그러면 테이블 콘텐츠 영역에 더 자세한 데이터가 필요합니다. 예를 들어 학생 번호는 001, 이름은 Zhang San, 과목은 수학, 점수는 80점입니다. 다른 과목이 없으면 총점은 80점입니다. 다른 과목도 있으니 다 합산하시죠?

이러한 내용은 tbody 태그가 필요한 테이블 내용 영역에 배치됩니다.

1.3 행과 열

테이블은 행과 행으로 나누어진 후 열과 열로 절단이 완료되면 각 조각은 셀, 작은 정사각형, 작은 정사각형이 됩니다.

또한 다음 사항에 유의하세요.행에는 열이 포함되어 있으므로 기억해야 합니다.。

행 레이블 이름은 다음과 같습니다. 트르  。

헤더의 셀 레이블은 다음과 같습니다. 일 , 테이블 본문 영역의 셀 레이블은 다음과 같습니다.티디 。

2 약간의 연습

2.1 간단한 성적표 만들기

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.2 경계선 추가

이 디스플레이는 약간 지저분하므로 경계선을 추가하면 테이블이 더 좋아 보입니다.하나를 추가할 수 있습니다.테두리="1" 속성 설정은 아래 코드를 살펴본 후 웹 페이지를 새로 고쳐서 훨씬 나아졌는지 확인해 보세요.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.3 크로스 행

물론 교차 표시를 만들 수도 있습니다. 예를 들어 Zhang San과 Li Si는 1학년 학생이고 같은 줄에 배치한 다음 1학년 학생이 2줄을 차지합니다.

그런 다음 학급에 Wang Wu와 Zhao Liu가 포함된 학급 2를 추가하고 이들이 큰 행을 차지하도록 하여 학급 2에 두 개의 작은 행이 있게 합니다.

여기서 무엇을 설정해야 할까요? 행 간격 속성.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

위의 코드를 보면 td 셀에 rowspan 속성을 설정했는데, 역시 클래스 1의 두 번째 셀이므로 동일한 td 코드를 추가할 필요가 없습니다.

2.4 교차 기둥

크로스 컬럼은 동일한 특성을 지닌 여러 컬럼을 의미하므로 하나의 컬럼 정보만 표시하면 충분합니다. 지금의 행 교차와 마찬가지로 Zhang San과 Li Si가 모두 클래스 1에 있는 것이 목적이 아니므로 중복 표시를 피하기 위해 모두 동일한 정보 속성을 갖기 때문에 둘 다 클래스 1입니다. 클래스 1을 표시하고 행을 충분히 건너면 됩니다.

열을 교차한다는 것은 여러 열을 하나로 병합하는 것을 의미합니다. 예를 들어 보겠습니다.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

하하, 위 코드는,사실, 이 스크린샷의 효과를 얻을 수는 없습니다., 코드를 받고 문제가 있는 경우 기억하세요.말해 주세요오.

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편