Bài 13: bảng trong html

Ví dụ html table

Con số	Họ	tên họ	điểm
1	Eve	Jackson	94
2	John	thỏ cái	80
3	Adam	Johnson	67
4	Jill	thợ rèn	50

---

Xác định bảng HTML

Thí dụ

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Ví dụ giải thích:

Bàn được định nghĩa với các tag <table>.

Bàn được chia thành hàng bảng với thẻ <tr>.

Hàng bảng được chia thành các dữ liệu bảng với <td> thẻ.

Một hàng bảng cũng có thể được chia thành các nhóm bảng với các thẻ <th>.

	dữ liệu bảng <td> là các thùng chứa dữ liệu của bảng. Chúng có thể chứa tất cả các loại của các yếu tố HTML như văn bản, hình ảnh, danh sách, bảng khác, vv

---

Một bảng HTML với một thuộc tính Border

Nếu bạn không chỉ định một biên giới cho bảng, nó sẽ được hiển thị không biên giới.

Một biên giới có thể được bổ sung bằng cách sử dụng thuộc tính border:

Thí dụ

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

	Các thuộc tính border là trên đường ra của chuẩn HTML! Nó là tốt hơn để sử dụng CSS.

Để thêm đường viền, sử dụng tài sản biên giới CSS:

Thí dụ

table, th, td {
    border: 1px solid black;
}

Hãy nhớ để xác định biên giới cho cả các bảng và các ô của bảng.

---

Một bảng HTML với biên giới đã thu gọn

Nếu bạn muốn biên giới sụp đổ vào một biên giới, thêm CSS cửa sụp đổ:

Thí dụ

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

---

Một bảng HTML với Padding di động

Tế bào đệm xác định không gian giữa các nội dung di động và biên giới của mình.

Nếu bạn không chỉ định một đệm, các tế bào bảng sẽ được hiển thị mà không padding.

Để thiết lập các đệm, sử dụng tài sản CSS padding:

Thí dụ

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

---

HTML Table Headings

Đề bảng được định nghĩa với các thẻ <th>.

Theo mặc định, tất cả các trình duyệt chính hiển thị tiêu đề bảng là táo bạo và trung tâm:

Thí dụ

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Để trái align đề bảng, sử dụng tài sản CSS text-align:

Thí dụ

th {
    text-align: left;
}

---

Một bảng HTML với Spacing biên giới

khoảng cách biên giới quy định các khoảng trống giữa các tế bào.

Để thiết lập khoảng cách biên giới cho một bảng, sử dụng tài sản CSS border-spacing:

Thí dụ

table {
    border-spacing: 5px;
}

	Nếu bảng đã sụp đổ biên giới, biên giới-khoảng cách không có hiệu lực.

---

Các tế bào bảng SPAN Nhiều Cột

Để thực hiện mở rộng trong nhiều hơn một cột, sử dụng thuộc tính colspan:

Thí dụ

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

---

Các tế bào bảng SPAN Nhiều Rows

Để thực hiện mở rộng trong nhiều hơn một dòng, sử dụng thuộc tính rowspan:

Thí dụ

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

---

Một bảng HTML Với Caption

Để thêm một chú thích vào một bảng, sử dụng <caption> tag:

Thí dụ

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

	<Caption> thẻ phải được chèn vào ngay sau thẻ <table> thẻ.

---

Kiểu Special One Bảng

Để xác định một phong cách đặc biệt cho một bảng đặc biệt, thêm một thuộc tính id để bàn:

Thí dụ

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Bây giờ bạn có thể xác định một phong cách đặc biệt cho bảng này:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

Và thêm nhiều phong cách:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

---

Chương Tóm tắt

• Sử dụng các thẻ <table> yếu tố để xác định một bảng
• Sử dụng các phần tử HTML <tr> để xác định một dòng của bảng
• Sử dụng các phần tử HTML <td> để định nghĩa một bảng dữ liệu
• Sử dụng các thẻ <th> yếu tố để xác định một tiêu đề bảng
• Sử dụng các phần tử HTML <caption> để xác định một chú thích bảng
• Sử dụng thuộc tính CSS biên giới để xác định ranh giới
• Sử dụng thuộc tính CSS cửa sụp đổ sụp đổ tế bào biên giới
• Sử dụng thuộc tính CSS padding để thêm đệm để các tế bào
• Sử dụng thuộc tính CSS text-align sắp xếp văn bản di động
• Sử dụng thuộc tính CSS cửa khoảng cách để thiết lập khoảng cách giữa các tế bào
• Sử dụng các thuộc tính colspan để làm cho một khoảng bào nhiêu cột
• Sử dụng các thuộc tính rowspan để làm cho một khoảng bào nhiêu hàng
• Sử dụng các thuộc tính id để xác định duy nhất một bảng

HTML Bảng khóa

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table