HTML 테이블 Javascript에 SQL 데이터 표시

| | | | |

웹 개발 초기에 HTML 테이블은 매우 단순했고 광범위한 스타일 옵션이 없었습니다. 그러나 오늘날 대부분의 테이블은 사용자에게 보다 미학적이고 기능적인 경험을 제공하기 위해 스타일이 지정됩니다.

CSS는 일련의 테이블 스타일 속성을 제공합니다. 이러한 속성을 사용하면 무엇보다도 표 셀을 분리하고, 표 테두리를 지정하고, 표 너비와 높이를 지정할 수 있습니다.

이 튜토리얼에서는 CSS를 사용하여 표 스타일을 지정하는 방법을 예제와 함께 설명합니다. . 이 튜토리얼을 마치면 전문가가 될 것입니다.

HTML 테이블

HTML 코드는 테이블의 구조를 정의합니다.

태그를 사용하여 테이블을 정의합니다. ,
태그는 각각 행, 테이블 헤더 및 콘텐츠 셀을 지정합니다.

HTML 테이블의 예를 살펴보겠습니다. 아래 예에는 2020년 3월 23일 주간 New York Times 베스트셀러 목록의 상위 5개 책을 나열한 표가 있습니다.

스크린샷 2020 03 24 at 09.50.10 1

테이블의 코드는 다음과 같습니다.

이 테이블에는 `on`의 행을 포함하여 3개의 열과 6개의 행이 있습니다. 당신의 마음.

표 CSS

CSS는 표의 스타일을 지정하는 데 사용됩니다. 위의 표는 정리된 데이터를 보여주지만 일반 HTML(스타일 없음)로 작성되었습니다. CSS를 사용하면 표를 더 보기 좋게 만들 수 있습니다.

CSS 기능을 사용하여 테이블 스타일을 지정합니다. CSS를 사용하여 다음을 수행할 수 있습니다.

  • 테두리 추가
  • 테두리 압축
  • 테두리 간격 조정
  • 폭과 높이 조정 표
  • 여백 추가
  • 텍스트 수평 정렬
  • 텍스트 수직 정렬
  • 조그 마우스(호버) 기능 추가
  • 셀 색상 설정
  • 빈 셀이 표시되는 방식 설정

아래 논의에서 이 모든 주제를 다룰 것입니다.

테두리

배열 주위나 배열에 포함된 요소 주위에 테두리를 추가한다고 가정합니다.

테두리를 추가하려면 border 속성을 사용할 수 있습니다. 다음은 border 속성을 사용하여 헤더 셀을 포함하여 테이블과 셀에 테두리를 추가하는 예입니다.

코드에서 1픽셀 너비의 단색 검정색 테두리를 정의합니다. 다음은 코드 결과입니다.

Screen Shot 2020 03 24 at 09.53.50 <너비" <너비 "520 = 168 "src = https://744025.smushcdn.com/1245953/wp-content/uploads/2020Shot3 -24-at-09.53.50.jpg? 손실 = 1 & 밴드 = 1 & webp = 1 "alt ="화면 2020 03 24 at 09.53.50 "class =" wp-image-14796 "srcset =" https: // 744025.smushcdn.com/1245953/wp- 콘텐츠 / 업로드 / 2020/04 /Screen-Shot-2020-03-24-at-09.53.50-20x6.png?lossy=1&strip=1&webp=1 20w, https://744025.smushcdn.com/1245953/wp -콘텐츠 / 업로드 / 2020/04 / Screen-Shot-2020-03-24-at-09.53.50.jpg? 크기 = 234x76 & 손실 = 1 & 스트립 = 1 & webp = 1234w, https: // 744025. smushcdn.com/1245953/wp -content / uploads / 2020 /04/Screen-Shot-2020-03-24-at- 09.53.50-385x124.png? 손실 = 1 & 밴드 = 1 & webp = 1385w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03-24-at-09.53. 50 .jpg? 크기 = 468x151 & 손실 sy = 1 & 스트립 = 1 & webp = 1 468w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03 -24- at-09.53.50 .jpg? lossy = 1 & strip = 1 & webp = 1520w "size =" (최대 너비: 520px) 100vw, 520px ">

이 테이블에는 double이 포함되어 있습니다. 테두리 테이블 자체(

), 헤더(
) 및 셀()에 테두리를 적용했기 때문입니다. 단일 테두리에 이중 테두리를 사용하려면 border-collapse 속성을 사용할 수 있습니다.

border-collapse 속성은 테이블의 이중 테두리를 단일 테두리로 변환합니다. border-collapse 속성의 기본값은 접혀 있습니다. border-collapse 속성이 값을 받으면 접기 , 배열 주위의 테두리가 축소됩니다.

다음은 b command-collapse 속성이 작동하는 예입니다.

코드 반환:

스크린샷 2020 03 24 ~ 09.55.49

이제 테이블과 그 내용에 단일 테두리가 있습니다.

Border Spac eng

border-spacing 속성을 사용하여 표에서 셀 사이의 간격을 정의할 수 있습니다. border-spacing 속성은 셀 사이의 가로 및 세로 간격을 정의합니다. cells - 그리고 순서대로 수행합니다.

다음은 초기 테이블(접힌 테두리가 없는 테이블)에서 border-spacing 속성을 사용한 예입니다.

우리 코드는 다음을 반환합니다.

Screen Shot 2020 03 24 At 09.58.18

각 셀의 가로 및 세로 간격은 10픽셀입니다. 세로 테두리.

너비 및 높이

너비 및 높이 속성을 사용하여 테이블의 너비와 높이와 속성을 지정할 수 있습니다.

위의 테이블 너비(경계가 접힌 테이블)가 웹 페이지 자체의 너비가 되기를 원하고 각 테이블 헤더의 높이가 30픽셀이어야 한다고 가정합니다. 이렇게 할 수 있습니다. 다음 CSS 코드 사용:

우리의 코드는 다음을 반환합니다:

<그림 클래스 = "wp-block-image"> 스크린샷 2020 03 24 at 10.00.26

보다시피 테이블의 너비는 또한, 우리 테이블의 열 헤더는 높이가 30픽셀입니다.

패딩

패딩 속성을 사용하여 페이지의 가장자리 사이에 약간의 공간을 추가할 수 있습니다. 테이블의 셀과 해당 셀의 내용입니다. padding 속성은

태그에 사용할 수 있습니다.

셀 주위에 10px 패딩을 추가한다고 가정해 보겠습니다. 헤더 셀을 포함한 테이블의 내용 다음 코드를 사용하여 수행할 수 있습니다.

우리 코드는 다음을 반환합니다.

 스크린샷 2020 03 24 ~ 08/10.03 1

각 줄의 내용과 이제 헤더 테이블 모든 가장자리에 10px 패딩이 있습니다.

가로 텍스트 정렬

text-align 속성을 사용하여 또는

에 저장된 텍스트를 정렬할 수 있습니다. 기본적으로 요소는 가운데 정렬되고 요소는 왼쪽 정렬됩니다.

텍스트 정렬 속성에서 가장 일반적으로 사용되는 값은 다음과 같습니다.< br>

  • 왼쪽, 가운데, 오른쪽(Microsoft Edge 및 Internet Explorer를 제외한 모든 브라우저에서 지원됨)
  • 시작 및 종료(Microsoft Edge 및 Internet Explorer를 제외한 모든 브라우저에서 지원됨) )

배열의

요소를 중앙에 배치하고 요소를 각 셀의 왼쪽에 정렬한다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

코드는 다음을 반환합니다.

Screen Shot 2020 03 24 10.03.04

이 예에서는 텍스트를 셀 외부의 중앙에 배치했습니다. 셀 d `헤더 및 헤더 셀 텍스트는 왼쪽 정렬됩니다.

세로 텍스트 정렬

CSS vertical-align 속성은

또는 태그 기본적으로 세로 정렬 속성의 값은 중간 으로 설정되며, 이는 콘텐츠가 셀 중앙에 세로로 정렬됨을 의미합니다.

의 텍스트를 셀의 맨 아래에 정렬하려는 경우 다음 코드를 사용하여 정렬합니다.

코드는 다음을 반환합니다.

샷 2020 03 24에서 10.05.40 사이의 화면

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method