먼저 HTML은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어라는 것을 알아야 합니다. HTML에서는 테이블을 만드는 데
태그를 사용할 수 있지만 실제로는 CSS(Cascading Style Sheets)를 사용합니다. , 태그를 사용하지 않고도 HTML로 테이블을 만들 수도 있습니다! BootStrap, Foundation, Pure, Bulma, UI kit, Materialise CSS, Semantic UI, Spectre 등 다양한 CSS 프레임워크를 사용할 수 있기 때문입니다.
그중에서도 Bootstrap은 매우 널리 사용되는 CSS 프레임워크입니다. Bootstrap의 그리드 시스템에는 인터페이스 항목 간의 공간적 분포와 강력한 정렬 기능을 제공하는 1차원 레이아웃 모델인 Flexbox가 내장되어 있습니다.
CSS의 BootStrap 프레임워크를 사용하여 테이블을 생성해 보겠습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表</title>
<!--Linking the BootStrap CDN-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<style type="text/css">
div {
text-align: center;
}
#heading {
font-weight: 700;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center display-4">示例表格</h1>
<div class="row border border-dark bg-success" id="heading">
<div class="col-3 border border-dark">Id</div>
<div class="col-3 border border-dark">姓名</div>
<div class="col-3 border border-dark">性别</div>
<div class="col-3 border border-dark">工资</div>
</div>
<div class="row border border-dark">
<div class="col border border-dark">101</div>
<div class="col border border-dark">张三</div>
<div class="col border border-dark">男</div>
<div class="col border border-dark">50000</div>
</div>
<div class="row border border-dark bg-info">
<div class="col border border-dark">102</div>
<div class="col border border-dark">李四</div>
<div class="col border border-dark">女</div>
<div class="col border border-dark">30000</div>
</div>
<div class="row border border-dark">
<div class="col border border-dark">103</div>
<div class="col border border-dark">王二</div>
<div class="col border border-dark">男</div>
<div class="col border border-dark">40000</div>
</div>
<div class="row border border-dark bg-info">
<div class="col border border-dark">104</div>
<div class="col border border-dark">赵五</div>
<div class="col border border-dark">女</div>
<div class="col border border-dark">45000</div>
</div>
</div>
</body>
</html>효과는 다음과 같습니다.
참고:
Bootstrap CDN은 공공 콘텐츠 전달 네트워크입니다. 사용자는 서버에서 CSS, JavaScript 및 이미지를 원격으로 로드하여 콘텐츠를 다운로드할 수 있습니다. 내장 CSS 라이브러리 클래스에 액세스하기 위한 코드에 대한 BootStrap CDN 링크입니다.
컨테이너는 실제 콘텐츠를 가로로 중앙에 채우는 데 사용됩니다.
행은 열을 캡슐화합니다.
열 열은 행의 직계 하위 항목입니다. 콘텐츠는 열에 배치되어야 합니다. 지정된 너비가 없는 열은 자동으로 동일한 너비 열로 표시됩니다. 열 너비를 명시적으로 지정하거나 다양한 화면 크기에 서로 다른 너비를 할당할 수 있습니다. 미리 정의된 유틸리티 클래스(예: bg-success, bg-info, bg-danger, bg-warning), 스타일시트 또는 인라인 스타일을 사용하여 다양한 행이나 열에 배경색을 지정할 수 있습니다.
Border는 셀 주위에 테두리를 만드는 데 사용되는 BootStrap의 사전 정의된 클래스입니다. 또한 색상이나 테두리 너비를 지정하여 모양과 느낌을 더욱 향상시킬 수 있는 여러 테두리 유틸리티 클래스(예: border-dark, border-light, border-danger, border-success, border-warning)가 있습니다.
추천 튜토리얼: "javascript 기본 튜토리얼" "bootstrap 튜토리얼" "HTML 비디오 튜토리얼"
