HTML Tables❮ PreviousNext ❯HTML Tab

HTML Tables
❮ PreviousNext ❯
HTML Table Example
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Try it Yourself »
Defining an HTML Table
An HTML table is defined with the tag.

Each table row is defined with the tag. A table header is defined with the tag. By default, table headings are bold and centered. A table data/cell is defined with the tag.

Example


Firstname
Lastname
Age


Jill
Smith
50


Eve
Jackson
94


Try it Yourself »
Note: The elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example
table, th, td {
border: 1px solid black;
}
Try it Yourself »
Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}
Try it Yourself »
HTML Table - Left-align Headings
By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}
Try it Yourself »
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}
Try it Yourself »
Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:

Example


Name
Telephone


Bill Gates
55577854
55577855


Try it Yourself »
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:

Example


Name:
Bill Gates


Telephone:
55577854


55577855


Try it Yourself »
HTML Table - Adding a Caption
To add a caption to a table, use the tag:

Example

Monthly savings

Month
Savings


January
$100


February
$50


Try it Yourself »
Note: The tag must be inserted immediately after the tag.

A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:

Example


Firstname
Lastname
Age


Eve
Jackson
94


Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Try it Yourself »
And add more styles:
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;
}
Try it Yourself »
Chapter Summary
Use the HTML element to define a table
Use the HTML element to define a table row
Use the HTML element to define a table data
Use the HTML element to define a table heading
Use the HTML element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 » Exercise 6 »

HTML Table Tags
Tag Description
Defines a table

ผลลัพธ์ (ไทย) 2:

ตาราง HTML
❮ย้อนกลับ❯
HTML ตารางตัวอย่าง
บริษัท ติดต่อประเทศ
Alfreds Futterkiste มาเรียเดเยอรมนี
Centro Comercial ม็อกเตซูฟรานซิสช้างเม็กซิโก
เอินส์ทฮัน Roland Mendel ออสเตรีย
เกาะเทรดดิ้งเฮเลนเบนเน็ตต์สหราชอาณาจักร
หัวเราะแบคคัส Winecellars โยชิ Tannamuri แคนาดา
Magazzini Alimentari Riuniti จิโอวานนี่ Rovelli อิตาลี
ลองตัวเอง»
การกำหนด HTML ตาราง
ตาราง HTML ที่ถูกกำหนดให้มีแท็ก.

แถวของตารางแต่ละครั้งจะถูกกำหนดด้วยแท็ก ส่วนหัวตารางจะถูกกำหนดด้วยแท็ก โดยค่าเริ่มต้นหัวตารางเป็นตัวหนาและเป็นศูนย์กลาง ข้อมูลตาราง / มือถือจะถูกกำหนดด้วยแท็ก.

ตัวอย่าง
















ชื่อจริง นามสกุล อายุ จิลล์ ช่างเหล็ก 50 วันก่อนวันหยุด แจ็คสัน 94
ลองตัวเอง»
หมายเหตุ:องค์ประกอบภาชนะบรรจุข้อมูลของตาราง.
พวกเขาสามารถมีทุกประเภทขององค์ประกอบ HTML; ข้อความ, ภาพ, รายการ, ตารางอื่น ๆ ฯลฯ

HTML ตาราง - เพิ่มชายแดน
หากคุณไม่ได้ระบุชายแดนสำหรับโต๊ะก็จะปรากฏไม่มีพรมแดน.

ชายแดนมีการตั้งค่าการใช้คุณสมบัติ CSS ชายแดน:

ตัวอย่าง
ตาราง TH, td {
ชายแดน: 1px ของแข็งสีดำ;
}
ลองตัวเอง»
จำเพื่อกำหนดพรมแดนทั้งตารางและเซลล์ตาราง.

HTML ตาราง - พรมแดนยุบ
ถ้าคุณต้องการเส้นขอบจะยุบเป็นหนึ่งชายแดนเพิ่มคุณสมบัติ CSS ชายแดนล่มสลาย:

ตัวอย่าง
ตาราง TH, td {
ชายแดน: 1px ของแข็งสีดำ
ขอบล่มสลาย: การล่มสลาย;
}
ลองตัวเอง»
ตาราง HTML - เพิ่มเซลล์ padding
เซลล์ padding ระบุช่องว่างระหว่างเนื้อหามือถือและพรมแดนของตน.

ถ้าคุณไม่ได้ระบุช่องว่างภายใน เซลล์ตารางจะปรากฏโดยไม่ต้อง padding.

การตั้งค่า padding ใช้คุณสมบัติ CSS padding:

ตัวอย่าง
TH, td {
padding: 15px;
}
ลองตัวเอง»
ตาราง HTML - หัวซ้ายจัด
โดยค่าเริ่มต้นหัวตารางเป็นตัวหนาและ . เป็นศูนย์กลาง

ทางด้านซ้าย-align หัวตารางให้ใช้ CSS คุณสมบัติ text-align:

ตัวอย่าง
TH {
text-align: ซ้าย;
}
ลองตัวเอง»
ตาราง HTML - เพิ่มชายแดนระยะห่าง
ระยะห่างชายแดนระบุช่องว่างระหว่างเซลล์.

การตั้งค่า ระยะห่างชายแดนตารางใช้ CSS ชายแดนระยะห่างทรัพย์สิน:

ตัวอย่าง
ตาราง {
border-ระยะห่าง: 5px;
}
ลองตัวเอง»
หมายเหตุ: ถ้าตารางมีการทรุดตัวลงพรมแดนชายแดนระยะห่างไม่มีผล.

ตาราง HTML - เซลล์ที่ครอบคลุม คอลัมน์มาก
ที่จะทำให้ช่วงเซลล์มากกว่าหนึ่งคอลัมน์ใช้แอตทริบิวต์ colspan:

ตัวอย่าง










ชื่อ โทรศัพท์ บิลเกตส์ 55577854 55577855
ลองตัวเอง»
ตาราง HTML - เซลล์ที่ครอบคลุมหลายแถว
เพื่อให้ช่วงเซลล์มากกว่าหนึ่งแถวใช้แอตทริบิวต์ rowspan:

ตัวอย่าง












ชื่อ: บิลเกตส์ โทรศัพท์: 55577854 55577855
ลองตัวเอง»
ตาราง HTML - เพิ่มคำอธิบายภาพ
เพื่อเพิ่มคำอธิบายในตารางให้ใช้Tag:

ตัวอย่าง














เงินฝากออมทรัพย์รายเดือน เดือน เงินออม มกราคม $ 100 กุมภาพันธ์ $ 50
ลองตัวเอง»
หมายเหตุ:แท็กจะต้องแทรกทันทีหลังจากแท็ก.

A รูปแบบพิเศษสำหรับตารางหนึ่ง
ในการกำหนดรูปแบบพิเศษสำหรับตารางพิเศษเพิ่มแอตทริบิวต์ ID เพื่อตาราง:

ตัวอย่าง











ชื่อจริง นามสกุล อายุ วันก่อนวันหยุด แจ็คสัน 94
ตอนนี้คุณสามารถกำหนดรูปแบบพิเศษสำหรับตารางนี้:
ตาราง # T01 {
ความกว้าง: 100%;
สีพื้นหลัง: # f1f1c1;
}
ลองตัวเอง»
และเพิ่มรูปแบบมากขึ้น:
ตาราง # T01 TR: ชับเด็ก (แม้) {
พื้นหลัง -color: #eee;
}
ตาราง # TR T01: ชับเด็ก (แปลก) {
สีพื้นหลัง: # fff;
}
ตาราง # T01 TH {
สี: สีขาว
สีพื้นหลัง: สีดำ;
}
ลองตัวเอง»
บทสรุป
การใช้งาน องค์ประกอบ HTML เพื่อกำหนดตาราง
การใช้องค์ประกอบ HTML เพื่อกำหนดตารางแถว
ใช้ HTMLองค์ประกอบในการกำหนดข้อมูลตาราง
ใช้ HTMLองค์ประกอบในการกำหนดตารางมุ่งหน้า
ใช้ HTMLองค์ประกอบในการกำหนดคำอธิบายตาราง
ใช้คุณสมบัติ CSS ชายแดนเพื่อกำหนดเส้นขอบที่
ใช้คุณสมบัติ CSS ชายแดนยุบเพื่อยุบพรมแดนมือถือ
ใช้คุณสมบัติ CSS padding เพื่อเพิ่มขยายไปยังเซลล์
ใช้ CSS คุณสมบัติ text-align เพื่อจัดตำแหน่งข้อความมือถือ
ใช้แบบ CSS ชายแดนระยะห่างคุณสมบัติการกำหนดระยะห่างระหว่างเซลล์
ใช้แอตทริบิวต์ colspan ที่จะทำให้ช่วงเซลล์หลายคอลัมน์
ใช้แอตทริบิวต์ rowspan ที่จะทำให้ช่วงเซลล์แถวมาก
ใช้แอตทริบิวต์ ID ที่จะไม่ซ้ำกันกำหนดตาราง
ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 »ออกกำลังกาย 2 »ออกกำลังกาย 3 » 4 การออกกำลังกาย»ออกกำลังกาย 5 »ออกกำลังกาย 6 »

HTML ตารางแท็ก
แท็กคำอธิบาย
กำหนดตาราง