HTML 테이블에 대한 모든 정보

14190 단어 tutorialhtmlwebdevcss
본문은 최초로 https://www.blog.duomly.com/how-to-build-an-html-table-tutorial/에 발표되었다
데이터가 표시될 항목을 구축하고 있을 때, 정보를 쉽고 쉽게 표시할 수 있는 좋은 방법이 필요합니다.데이터 유형에 따라 다양한 HTML 요소 중에서 선택할 수 있습니다.
많은 상황에서 표는 대량의 구조화된 데이터를 잘 나타내는 가장 편리한 방법이다.이것이 바로 본고에서 저는 당신에게 표의 구조를 설명하고 어떻게 표를 만드는지 보여주고 데이터를 표로 표시할 때 조언을 드리고 싶습니다.
만약 네가 먼저 보고 읽는 것을 좋아한다면, 내가 여기에 너에게 비디오 버전을 하나 줄게.
HTML 테이블 마스터가 되자!

HTML 표 구조 - 안에 뭐예요?


HTML 테이블은 여러 요소로 구성되어 있으며 요소마다 다른 태그가 있습니다.
당신이 사용해야 할 첫 번째 요소는 <table> 표시입니다. 이것은 테이블을 구축하는 요소에 사용되는 용기입니다.이 용기에는 줄, 열, 셀 등 다른 요소를 설치해야 합니다.
다음 그림에서 어떤 요소가 가장 기본적인 표의 일부인지 볼 수 있습니다.
<tr>- 먼저 테이블에 생성해야 하는 태그입니다.이것은 줄을 만드는 데 사용됩니다.tr를 시계줄로 볼 수 있기 때문에 기억하기 쉽습니다.
그리고 줄 안에서 칸을 만들어야 합니다. 열을 만드는 것으로 간주할 수도 있습니다.필요에 따라 두 개의 다른 태그를 사용할 수 있습니다.<th> - 제목 셀을 만드는 옵션입니다.<td>- 일반 칸을 구축하는 데 사용되며, 필요에 따라 줄마다 임의의 <td>개의 요소를 배치할 수 있습니다.
간단한 예를 들어 보겠습니다.
<tr>
  <th>id</th>
</tr>
<tr>
  <td>1</td>
</tr>
위에서 설명한 태그는 HTML 테이블을 만들 때 반드시 사용해야 하는 기본 요소일 뿐입니다.다른 요소를 사용하여 고급 테이블을 구성하는 데 도움이 되는 HTML 태그도 있습니다.그림 보기:
<caption>은 표에 제목이나 제목을 추가할 수 있습니다.오픈 후 직접 사용
태그<thead> | <tbody> | <tfoot>은 더욱 구조화된 방식으로 표를 구축할 수 있습니다. 방법은 표두를 <thead>에 넣고 모든 본문 요소를 <tbody>에 넣고 페이지 꼬리줄이나 다른 정보를 <tfoot>에 넣는 것입니다.그리고 두 개의 특수 속성은 우리가 칸, 즉colspan과rowspan을 조작할 수 있도록 합니다.Colspan 예: Rowspan 예: 이 속성들은 수치를 사용하고 다른 줄이나 열을 뛰어넘어 표열이나 줄을 확장할 수 있습니다.

2. 코드 예제로 HTML 테이블 만들기

HTML 테이블에 대한 모든 지식을 익힌 후에 구축합시다.우선, 당신이 가장 좋아하는 코드 편집기를 열고 간단한 것을 만듭니다.html 파일.너는 마음대로 그것을 불러도 된다.
다음 코드와 같이 테이블 구조를 포함하는 간단한 HTML 파일 구조를 만들기 시작합니다.
<html>
  <head>
    <title>HTML Table by Duomly</title>
    <style></style>
  </head>
  <body>
    <table>
      <thead></thead>
      <tbody></tbody>
      <tfoot></tfoot>
    </table>
  </body>
</html>
이제 우리는 약간의 데이터를 넣을 때가 되었다.표 제목을 만듭니다.
<thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    <th colspan=2>Phone number</th>
  </tr>
</thead>
은 이미 표두를 준비했기 때문에 표체에 데이터를 추가합시다.우리는 10줄이 있을 것이다.
<tbody>
  <tr>
    <td>001</td>
    <td>Mark Smith</td>
    <td>[email protected]</td>
    <td>0034 238 212 123</td>
    <td>0034 78 261 231</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Martha Collins</td>
    <td>[email protected]</td>
    <td>0034 726 121 984</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Sam McNeal</td>
    <td>[email protected]</td>
    <td>0022 081 273 552</td>
  </tr>
  <tr>
    <td>004</td>
    <td>Sarah Powels</td>
    <td>[email protected]</td>
    <td>0044 019 937 133</td>
  </tr>
  <tr>
    <td>005</td>
    <td>Peter Kovalsky</td>
    <td>[email protected]</td>
    <td>0022 836 657 342</td>
  </tr>
  <tr>
    <td>006</td>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>0021 384 482 173</td>
  </tr>
  <tr>
    <td>007</td>
    <td>Ann Flori</td>
    <td>[email protected]</td>
    <td>0044 239 138 283</td>
  </tr>
  <tr>
    <td>008</td>
    <td>Martin Edwards</td>
    <td>[email protected]</td>
    <td>0034 276 693 538</td>
    <td>0034 40 5793 963</td>
  </tr>
  <tr>
    <td>009</td>
    <td>Judy Malcolm</td>
    <td>[email protected]</td>
    <td>0021 845 304 287</td>
  </tr>
  <tr>
    <td>010</td>
    <td>Charles Richardson</td>
    <td>[email protected]</td>
    <td>0044 856 248 329</td>
  </tr>
</tbody>
이제 우리의 책상 주체가 준비되었습니다.tfoot 요소를 추가합니다.
<tfoot>
  <tr>
    <td colspan=5>Total amount of clients: 10</td>
  </tr>
</tfoot>
책상의 구조는 이미 준비가 되었지만, 우리는 우리의 책상이 예뻐 보이기를 바란다. 이것이 바로 우리가 몇 가지 스타일을 추가해야 하는 이유이다.HTML 파일의 style 섹션의 head으로 돌아가 다음 코드를 배치합니다.
body {
  margin: 0;
  padding: 2rem;
}
.tablecontainer {
  max-height: 250px;
  overflow: auto;
}
table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
  background-color: #f6f6f6;
}
th, td {
  padding: 0.5em;
}
th {
  background: #ffc107;
  color: white;
  border-radius: 0;
  position: sticky;
  top: 0;
  padding: 10px;
}
td {
  border: 1px solid white;
  box-sizing: border-box;
}
tfoot > tr  {
  background: black;
  color: white;
}
tbody > tr:hover {
  background-color: #ffc107;
}
, 봐라!
HTML 테이블이 준비되었습니다.다음 그림에서 보듯이 은 위의 코드에서 모든 구조 요소를 사용하여 간단한 표를 만들었습니다.우리는 또 약간의 조형을 늘려서 우리의 책상을 더욱 유용하고 보기 좋게 했다.우리 테이블에는 고정된 제목이 하나 더 있기 때문에 대량의 데이터를 스크롤해서 볼 수 있고, 제목 줄을 볼 수 있습니다.

3. 프로젝트에서 HTML 테이블을 사용해야 하는 경우

만약 당신이 언제 표를 사용하는 것이 좋은 생각인지 확실하지 않다면, 언제 그렇지 않다면, 당신은 반드시 제시해야 할 날짜를 보아야 합니다.만약 그것이 내가 위에서 사용한 구조와 유사한 표의 데이터라면, 그것은 그것을 표로 표시하는 가장 좋은 옵션 중의 하나이다.깨끗한 데이터 표시 외에도 테이블에 대해 편안한 필터링과 정렬을 할 수 있다.그러나 한 가지 피해야 할 것은 표에 사이트를 구축하는 구조이다.
한동안 유행했던 방법이었지만 지금은 flexbox과 CSS grid 같은 가능성이 있기 때문에 더 좋은 방식으로 페이지의 응답성을 유지할 수 있습니다.

결론

HTML 테이블은 구조화된 테이블 데이터를 레이아웃에 표시하는 좋은 방법입니다.<table>, <tr>, <td> 등 기본 요소를 사용하여 만들 수 있지만, 더 많은 기능을 추가하고 적절한 구조를 구축할 수도 있습니다.만약 당신이 CSS와 HTML을 그다지 좋아하지 않는다면, 유행하는 CSS frameworks을 선택할 수 있습니다. 이것은 기존의 시계가 있고, 그 중에서 많은 기존의 옵션이 있으며, 프로젝트에서 쉽게 사용할 수 있습니다.그러나 나는 당신들이 그것을 구축하는 것을 배우고 어떻게 일을 하는지, 그리고 당신들이 무엇을 바꿀 수 있는지 이해하도록 진심으로 격려합니다.읽어주셔서 감사합니다.
Duomly에서 온 Anna

페이지에 업로드된 excel 파일을 읽고 백엔드 mysql 데이터베이스에 저장합니다
라즈파에 액정 스크린을 설치하는 고전

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage