Note

simle and clean table

zdiv 2023. 8. 13. 16:05

 

<!doctype html>
<html lang="en">
<head>
<title>Table 01</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<style>
th.header {
 color: white;
 background-color: skyblue;
}
th {
 text-align: center;
}
th, td {
 padding: 2px!important;
 font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="m-4">
<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header">#</th>
      <th class="header">First</th>
      <th class="header">Last</th>
      <th class="header">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

 

th.header {
 color: white;
 background-color: black;
}

'Note' 카테고리의 다른 글

fastapi + jinja2 + webpack + chart.js + matplotlib  (0) 2023.08.12
express + webpack + chart.js + jquery  (0) 2023.08.06
html에서 react 사용하기  (0) 2023.08.05
express + fetch + chart.js  (0) 2023.08.01
express로 nodejs 웹서버 만들기  (0) 2023.07.30