tritue.edu.vn
Home » HTML - Bài 3. Tạo bảng và danh sách » Hiệu chỉnh đường viền của bảng trong html


Hiệu chỉnh đường viền của bảng trong html

Khi cần hiệu chỉnh đường viền của bảng, bạn nên dùng style


Dùng style để hiệu chỉnh bảng

Copy 
         
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>



<h2>Table With Border</h2>



<p>Use the CSS border property to add a border to the table.</p>



<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>



</body>

</html>

Thu hẹp đường viền của bảng

Copy 
         
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

</style>

</head>

<body>



<h2>Collapsed Borders</h2>

<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>



<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>



</body>

</html>

Tạo phong cách cho bảng

Copy 
         
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid white;

  border-collapse: collapse;

}

th, td {

  background-color: #96D4D4;

}

</style>

</head>

<body>



<h2>Table With Invisible Borders</h2>



<p>Style the table with white borders and a background color of the cells to make the impression of invisible borders.</p>



<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>



</body>

</html>

Bo tròn góc các ô trong bảng

Copy 
         
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-radius: 10px;

}

</style>

</head>

<body>



<h2>Table With Rounded Borders</h2>



<p>Use the CSS border-radius property to add rounded corners to the borders.</p>



<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>



</body>

</html>

Thay đổi kiểu đường viền của bảng

Copy 
         
Các kiểu đường viền (border-style) có thể dùng:



    
	
  • dotted     
    • 
	
  • dashed     
    • 
	
  • solid     
    • 
	
  • double     
    • 
	
  • groove     
    • 
	
  • ridge     
    • 
	
  • inset     
    • 
	
  • outset     
    • 
	
  • none     
    • 
	
  • hidden  
    • 




<!DOCTYPE html>

<html>

<head>

<style>

th, td {

  border-style: dotted;

}

</style>

</head>

<body>



<h2>Table With Dotted Borders</h2>



<p>Use the CSS border-style property to set the style of the borders.</p>



<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>



</body>

</html>

Link chia sẻ bài viết
Copy 
            https://tritue.edu.vn/tuecode/tracnghiem30/index.php/baiviet/post/view/id/200?id=200

Bài viết liên quan