본문 바로가기

HTML

Table Borders

Table Borders

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* ex1 */
      table,
      th,
      td {
        border: 1px solid black;
      }

      /* ex2 */
      /* table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      } */

      /* ex3 */
      /* table, th, td {
        border: 1px solid white;
        border-collapse: collapse;
      }
      th, td {
        background-color: #96D4D4;
      }  */

      /* ex4 */
      /* table,th,td {
        border: 1px solid black;
        border-radius: 10px;
      } */

      /* ex5 */
      /* th,td {
        border: 1px solid black;
        border-radius: 10px;
      } */

      /* ex6 */
      /* th,td {
        border-style: dotted;
      } */

      /* ex7 */
      /* th,td {
        border-color: #96d4d4;
      } */
    </style>
  </head>
  <body>
    <table style="width: 100%">
      <tr>
        <th>name</th>
        <th>country</th>
        <th>gender</th>
      </tr>
      <tr>
        <td>biden</td>
        <td>usa</td>
        <td>man</td>
      </tr>
      <tr>
        <td>markel</td>
        <td>germany</td>
        <td>woman</td>
      </tr>
      <tr>
        <td>makron</td>
        <td>france</td>
        <td>man</td>
      </tr>
    </table>
  </body>
</html>

ex1
ex2
ex3
ex4
ex5
ex6
ex7

 

'HTML' 카테고리의 다른 글

TableStyling  (0) 2023.02.01
Colspan&Rowspan  (0) 2023.02.01
Padding&Spacing  (0) 2023.02.01
TableSizes  (0) 2023.01.31
HTML table tag  (0) 2023.01.30