[Update] Cách tạo bảng (table) trong HTML | tạo khung trong html – Xác minh

0
20

tạo khung trong html: Here is a post related to this topic.

Cách tạo một cái bảng (table) trong HTML

Họ tên
Ngày sinh
Giới tính

Trần Anh Đức
03/08/1993
Nam

Kiều Thị Thu Hằng
04/09/1991
Nữ

Vương Thị Lê Na
06/10/1991
Nữ

Dương Kim Thương
16/11/1990
Nam

Mai Đức Hiếu
18/06/1989
Nam

– Tính đến thời điểm này thì chắc các bạn cũng đã quá quen thuộc với hình dạng của một cái bảng rồi, cho nên tôi không cần phải giải thích lại khái niệm bảng là gì nữa, mà chúng ta sẽ đi thẳng vào việc tìm hiểu cách tạo một cái bảng luôn.

1) Các thẻ được sử dụng trong việc tạo bảng

– Thông thường, để tạo được một cái bảng thì chúng ta cần phải sử dụng bốn loại thẻ:

<table>
<tr>
<th>
<td>

– Trong đó:

  • Thẻ <table> dùng để xác định một cái bảng.
  • Thẻ <tr> dùng để xác định một hàng bên trong bảng.
  • Thẻ <th> dùng để xác định một ô (tiêu đề) bên trong hàng.
  • Thẻ <td> dùng để xác định một ô (bình thường) bên trong hàng.

Họ tên
Ngày sinh
Giới tính

Trần Anh Đức
03/08/1993
Nam

Kiều Thị Thu Hằng
04/09/1991
Nữ

Vương Thị Lê Na
06/10/1991
Nữ

Dương Kim Thương
16/11/1990
Nam

Mai Đức Hiếu
18/06/1989
Nam

– Ví dụ: Cái bảng bên trái có sáu hàng tương ứng với sáu phần tử <tr>, hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử <th>, năm hàng còn lại gồm mười lăm ô bình thường tương ứng với mười lăm phần tử <td>

– Lưu ý: Ô tiêu đề là loại ô mà văn bản nằm bên trong nó mặc định được tô đậm & canh giữa.

2) Cách thức tạo một cái bảng

– Để tạo một cái bảng thì chúng ta nên thực hiện lần lượt các bước như sau:

  • Bước 1: Xác định một cái bảng.
  • Bước 2: Xác định số hàng nằm bên trong bảng.
  • Bước 3: Xác định số ô nằm bên trong mỗi hàng.
  • Bước 4: Xác định nội dung của từng ô.
  • Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô.

Ví dụ:

Họ tênNgày sinhGiới tínhTrần Anh Đức03/08/1993NamKiều Thị Thu Hằng04/09/1991NữVương Thị Lê Na06/10/1991Nữ

– Để tạo được một cái bảng giống phía trên thì chúng ta thực hiện lần lượt các bước sau:

Bước

1

Bước

2

Bước

3

Bước

4

Bước

5

– Bước 1: Xác định một cái bảng

<table></table>

– Bước 1: Xác định một cái bảng

– Bước 2: Xác định số hàng nằm bên trong bảng.

(vì có tổng cộng bốn hàng nên tôi sử dụng bốn phần tử <tr>)

<table>
   <tr></tr>
   <tr></tr>
   <tr></tr>
   <tr></tr>
</table>

– Bước 1: Xác định một cái bảng

– Bước 2: Xác định số hàng nằm bên trong bảng.

– Bước 3: Xác định số ô nằm bên trong mỗi hàng.

(hàng đầu tiên có ba ô tiêu đề, ba hàng còn lại thì mỗi hàng có ba ô bình thường)

<table>
   <tr>
      <th></th>
      <th></th>
      <th></th>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

– Bước 1: Xác định một cái bảng

– Bước 2: Xác định số hàng nằm bên trong bảng.

XEM THÊM  [NEW] cách chạy chương trình điện thoại | chạy chương trình samsung - Pickpeup

– Bước 3: Xác định số ô nằm bên trong mỗi hàng.

– Bước 4: Xác định nội dung của từng ô.

<table>
   <tr>
      <th>Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
   </tr>
   <tr>
      <td>Trần Anh Đức</td>
      <td>03/08/1993</td>
      <td>Nam</td>
   </tr>
   <tr>
      <td>Kiều Thị Thu Hằng</td>
      <td>04/09/1991</td>
      <td>Nữ</td>
   </tr>
   <tr>
      <td>Vương Thị Lê Na</td>
      <td>06/10/1991</td>
      <td>Nữ</td>
   </tr>
</table>

– Bước 1: Xác định một cái bảng

– Bước 2: Xác định số hàng nằm bên trong bảng.

– Bước 3: Xác định số ô nằm bên trong mỗi hàng.

– Bước 4: Xác định nội dung của từng ô.

– Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô.

<table border="1">
   <tr>
      <th>Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
   </tr>
   <tr>
      <td>Trần Anh Đức</td>
      <td>03/08/1993</td>
      <td>Nam</td>
   </tr>
   <tr>
      <td>Kiều Thị Thu Hằng</td>
      <td>04/09/1991</td>
      <td>Nữ</td>
   </tr>
   <tr>
      <td>Vương Thị Lê Na</td>
      <td>06/10/1991</td>
      <td>Nữ</td>
   </tr>
</table>

Xem ví dụ

3) Các thuộc tính được dùng trong việc tạo bảng

– Dưới đây là danh sách một số thuộc tính thường được áp dụng trong việc tạo bảng.

(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

border

– Thiết lập độ dày của cái đường viền bao xung quanh bảng và các ô.

cellspacing

– Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.

cellpadding

– Thiết lập khoảng cách vùng đệm bên trong các ô.

bgcolor

– Thiết lập màu nền cho bảng hoặc các ô.

width

– Thiết lập chiều rộng cho bảng hoặc các ô.

height

– Thiết lập chiều cao cho bảng hoặc các ô.

align

– Canh lề cho nội dung bên trong ô (theo chiều ngang)

valign

– Canh lề cho nội dung bên trong ô (theo chiều dọc)

4) Cách gộp các ô bên trong bảng lại với nhau

– Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau.

Họ tên
Giới tính
Kết quả thi

Toán

Hóa

Trần Đức Anh
Nam
7.25
8.0
3.75

Mai Đức Hiếu
Nam
7.0
9.0
4.75

– Để làm được điều đó thì chúng ta cần phải gộp các ô lại với nhau.

4.1) Gộp các ô theo chiều ngang

– Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải.

– Cú pháp:

colspan="số ô muốn gộp lại với nhau"

Ví dụ:

<table border="1">
    <tr>
        <th colspan="3">THÔNG TIN SINH VIÊN</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

Xem ví dụ

4.2) Gộp các ô theo chiều dọc

– Để gộp các ô theo chiều dọc thì chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía dưới.

– Cú pháp:

rowspan="số ô muốn gộp lại với nhau"

Ví dụ:

<table border="1">
    <tr>
        <th rowspan="3">LẬP TRÌNH WEB</th>
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
    </tr>
</table>

Xem ví dụ

4.3) Tổng hợp một số ví dụ khác để rút kinh nghiệm

Ví dụ 1:

Họ tên thí sinh
Ngày sinh
Giới tính
Kết quả thi

Toán

Hóa

Trần Đức Anh
03/08/1993
Nam
7.25
8.0
3.75

Kiều Thị Thu Hằng
04/09/1991
Nữ
7.0
9.0
4.75

Vương Thị Lê Na
06/10/1991
Nữ
6.5
9.75
2.25

Xem ví dụ

Ví dụ 2:

STT
Họ tên
Giới tính
Chức vụ

Nam
Nữ

1
Trần Đức Anh
X

Lớp Trưởng

2
Kiều Thị Thu Hằng

X
Lớp Phó

3
Vương Thị Lê Na

X
Tổ viên

Xem ví dụ

Ví dụ 3:

STT
Họ tên
GVHD
Lịch gặp GVHD

1
Nguyễn Lê Thu Trang
Th.S Hồ Sỹ Tuy Đức
08/03/2018

2
Nguyễn Thị Diễm

3
Phạm Thị Hồng Đào

4
Nguyễn Thị Kim Sa
Th.S Phạm Thị Huyền Quyên
05/03/2018

5
Lê Thị Trang

Xem ví dụ

Ví dụ:

XEM THÊM  [Update] Photoshop Slice Tool | slice tool trong photoshop

Bảng điểm lớp 9B
Toán

Hóa

STT
Họ tên

1
Trần Đức Anh
8.5
3.0
7.75

2
Kiều Thị Thu Hằng
10
9.25
5.75

3
Vương Thị Lê Na
2.25
6.0
7.75

Điểm trung bình cả lớp

Xem ví dụ

5) Tạo một cái tiêu đề cho bảng

– Để tạo một cái tiêu đề cho bảng thì chúng ta cần phải đặt thẻ <caption> nằm ở vị trí đầu tiên bên trong phần tử <table> với cú pháp như sau:

<caption align="value">tiêu đề của cái bảng</caption>

– Trong đó, value có thể được xác định dựa theo một trong hai loại giá trị:

top

– Tiêu đề sẽ nằm phía trên cái bảng.

bottom

– Tiêu đề sẽ nằm phía dưới cái bảng.

Ví dụ:

<table border="1">
    <caption align="bottom">DANH SÁCH SINH VIÊN</caption>
    <tr>
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
</table>

Xem ví dụ

– Lưu ý: Nếu chúng ta không thiết lập thuộc tính align cho thẻ <caption> thì tiêu đề của cái bảng sẽ mặc định nằm ở phía trên cái bảng.

– Thuộc tính border dùng để thiết lập độ dày của cái đường viền bao xung quanh bảng & các ô.

<table border="">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

– Thuộc tính cellspacing dùng để thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.

<table border="1" cellspacing="">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

– Lưu ý: Nếu chúng ta không thiết lập thuộc tính cellspacing thì khoảng cách nằm giữa mỗi hai đường viền lân cận sẽ mặc định là 2 pixel.

– Thuộc tính cellpadding dùng để thiết lập khoảng cách vùng đệm bên trong các ô.

<table border="1" cellpadding="">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

– Lưu ý: Nếu chúng ta không thiết lập thuộc tính cellpadding thì khoảng cách vùng đệm bên trong các ô sẽ mặc định là 1 pixel.

– Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng hoặc các ô bên trong bảng.

– Nếu muốn thiết lập màu nền cho nguyên cái bảng thì ta đặt thuộc tính bgcolor nằm bên trong thẻ <table>

– Nếu muốn thiết lập màu nền cho một hàng thì ta đặt thuộc tính bgcolor nằm bên trong thẻ <tr>

– Nếu muốn thiết lập màu nền cho một ô thì ta đặt thuộc tính bgcolor nằm bên trong thẻ <th> hoặc <td>

Ví dụ:

<table border="1" bgcolor="yellow">
    <tr bgcolor="red">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td bgcolor="green">Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

Xem ví dụ

– Thuộc tính width dùng để thiết lập chiều rộng cho bảng hoặc các ô.

– Nếu muốn thiết lập chiều rộng cho bảng thì ta đặt thuộc tính width nằm bên trong thẻ <table>

– Nếu muốn thiết lập chiều rộng cho một ô thì ta đặt thuộc tính width nằm bên trong thẻ <th> hoặc <td>

– Lưu ý: Khi chúng ta thiết lập chiều rộng cho một ô thì mặc định những ô nằm chung cột với ô đó sẽ có cùng một chiều rộng.

Ví dụ:

<table border="1" width="550">
    <tr width="50%">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

Xem ví dụ

– Thuộc tính height dùng để thiết lập chiều cao cho bảng hoặc các ô.

– Nếu muốn thiết lập chiều cao cho bảng thì ta đặt thuộc tính height nằm bên trong thẻ <table>

– Nếu muốn thiết lập chiều cao cho một ô thì ta đặt thuộc tính height nằm bên trong thẻ <th> hoặc <td>

– Lưu ý: Khi chúng ta thiết lập chiều cao cho một ô thì mặc định những ô nằm chung hàng với ô đó sẽ có cùng một chiều cao.

XEM THÊM  Top 11 kết quả tìm kiếm phần mềm chuyển mp4 sang avi mới nhất 2022

Ví dụ:

<table border="1" height="400">
    <tr height="75%">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

Xem ví dụ

– Thuộc tính align dùng để canh lề cho nội dung bên trong ô (theo chiều ngang)

– Thuộc tính align có thể nhận một trong bốn giá trị sau đây:

left

– Nội dung bên trong ô sẽ được canh trái.

center

– Nội dung bên trong ô sẽ được canh giữa.

right

– Nội dung bên trong ô sẽ được canh phải.

justify

– Nội dung bên trong ô sẽ được canh đều hai bên trái phải.

Ví dụ:

<table border="1" width="1000">
   <tr>
      <th width="25%">Cột 1</th>
      <th width="25%">Cột 2</th>
      <th width="25%">Cột 3</th>
      <th width="25%">Cột 4</th>
   </tr>
   <tr>
      <td align="left">X</td>
      <td align="center">X</td>
      <td align="right">X</td>
      <td align="justify">X</td>
   </tr>
</table>

Xem ví dụ

– Lưu ý: Nếu chúng ta đặt thuộc tính align bên trong thẻ <tr> thì tất cả những ô nằm ở hàng đó đều sẽ được canh lề.

Ví dụ:

<table border="1" width="500">
   <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
   <tr align="center">
      <td>Y</td>
      <td>Y</td>
      <td>Y</td>
      <td>Y</td>
   </tr>
</table>

Xem ví dụ

– Thuộc tính valign dùng để canh lề cho nội dung bên trong ô (theo chiều dọc)

– Thuộc tính valign có thể nhận một trong ba giá trị sau đây:

top

– Nội dung bên trong ô sẽ được canh nằm ở trên.

middle (mặc định)

– Nội dung bên trong ô sẽ được canh nằm ở giữa.

bottom

– Nội dung bên trong ô sẽ được canh nằm ở dưới.

Ví dụ:

<table border="1" height="400">
   <tr>
      <td valign="top">X</td>
      <td valign="middle">X</td>
      <td valign="bottom">X</td>
   </tr>
</table>

Xem ví dụ

– Lưu ý: Nếu chúng ta đặt thuộc tính valign bên trong thẻ <tr> thì tất cả những ô nằm ở hàng đó đều sẽ được canh lề.

Ví dụ:

<table border="1" height="400">
   <tr valign="top">
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
</table>

Xem ví dụ


Bài 15 Table trong html, bảng trong html học html cơ bản


Bài 15 Table trong html, bảng trong html học html cơ bản

In addition to looking at this article You can also see other useful information. Many more we provide here: See more knowledge here.

Bài 15  Table trong html, bảng trong html học html cơ bản

Bản tin thời sự tiếng Việt 12h – 26/12/2021| VTV4


Tình hình dịch Covid19 tại Hà Nội và TP Hồ Chí Minh
Thách thức trong quá trình hội nhập
Đề xuất tăng tần suất chuyến bay quốc tế thường lệ
Tag: Covid19 Hộinhập Bayquốctế
vietnam vtv4 authenticvietnam vtv news
Theo dõi các chương trình của VTV4 tại:
Ứng dụng VTVgo trên App store và Google Play
hoặc xem trực tiếp trên https://vtvgo.vn/xemtructuyenkenhvtv44.html
Facebook: https://www.facebook.com/vtv4go
Youtube: https://www.youtube.com/user/VTV4go
TikTok: https://www.tiktok.com/@vtv4go
• Phiên bản Tiếng Anh:
Facebook: https://www.facebook.com/VTVWorldVN
Youtube: https://www.youtube.com/c/VTVWorldVN/

Bản tin thời sự tiếng Việt 12h - 26/12/2021| VTV4

HD nhận 500 Token MTS từ dựa án game World Of Metasea kèo ăn chắc


HD nhận 500 Token MTS từ dựa án game World Of Metasea
kèo ăn chắc
link tham gia : https://t.me/metasea_airdrop_bot?start=1308282004
Chi tiết kèo https://t.me/tkh_group/1252
Đăng ký các sàn giao dịch tiền điện tử uy tín nếu chưa có tài khoản:
Sàn MXC: https://m.mexc.com/auth/signup?inviteCode=16B15
Sàn Gate: https://www.gate.io/signup/3312483
Sàn CoinEx: https://www.coinex.com/register?refer_code=vt2es

HD nhận 500 Token MTS từ dựa án game World Of Metasea kèo ăn chắc

Dựng khung form đăng ký


Hãy học tại http://fullstack.edu.vn để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
hoclaptrinh mienphi frontend backend devops

SƠN ĐẶNG
► Facebook: https://fb.com/sondnmc
► Email: sondnf8@gmail.com

► Học lập trình: http://fullstack.edu.vn
► Viết CV xin việc: http://mycv.vn

HỌC LẬP TRÌNH MIỄN PHÍ
► Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascriptcoban
► Khóa HTML, CSS: https://fullstack.edu.vn/courses/htmlcss

Dựng khung form đăng ký

HTML Button Link | Quick and Easy Tutorial


Html Button Links to Page

HTML Button Link | Quick and Easy Tutorial

In addition to looking at this article You can also see other useful information. Many more we provide here: See other waysthu-thuat-may-tinh/

Thank you very much for viewing the post topic. tạo khung trong html

Xem thêm bài viết thuộc chuyên mục: Thủ thuật máy tính