CSS Tables

Table Borders เส้นขอบตาราง

เราระบุ เส้นขอบตาราง ใน CSS ได้เลย โดยใช้คุณสมบัติของ [border: ……….;]

HTML

<div class="container">
   <h2>Add a border to a table:</h2>
   <table>
      <tr>
         <th>Firstname</th>
         <th>Lastname</th>
      </tr>
      <tr>
         <td>Peter</td>
         <td>Griffin</td>
      </tr>
      <tr>
         <td>Lois</td>
         <td>Griffin</td>
      </tr>
   </table>
</div>

CSS

table, th, td {
     border: 2px solid brown;  //กรอบตารางทั้งด้านในและนอก แต่เขาไม่นิยมทำกันแบบนี้น่ะ เท่าที่เคยเห็นมา 
}

Table Borders เส้นขอบตาราง

Collapse Table Borders ไม่มีกรอบ

[border-collapse: ………….;] ทำลายเส้นกรอบภายในตาราง ให้มีแค่เส้นเดียว เนื้อหาในส่วนของ HTML จะใช้ตัวเดิมและเพิ่ม CSS ส่วนนี้เข้าไป

CSS

table, th, td {
     border: 2px solid brown;
}
table{
     border-collapse: collapse;  //กรอบด้านในหายไป
}

Collapse Table Borders ไม่มีกรอบ

ถ้าต้องการเส้นขอบของตาราง ให้ระบุคุณสมบัติของ border

CSS

table { 
     border: 2px solid brown;   //ขนาดเส้นขอบ รูปแบบของเส้น  สีของเส้น
}

ถ้าต้องการเส้นขอบของตาราง ให้ระบุคุณสมบัติของ border

Table Width and Height ตาราง ความกว้าง และ ความสูง

ความกว้างและความสูงของตาราง กำหนดโดยคุณสมบัติ [width] และ [height]

CSS

table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;     //ความกว้างของตาราง 
}
th {
  height: 50px;    //ความสูงแต่ละแถว
}

Table Width and Height ตาราง ความกว้าง และ ความสูง

Horizontal Alignment การจัดวางแนวนอน

[text-align: ……….;] กำหนดคุณสมบัติ การจัดวางแนวนอน (ซ้าย ขวา ตรงกลาง) ของเนื้อหา <th> หรือ <td> โดยกำหนดเนื้อหาของ elements <th> คือ center-aligned และ เนื้อหาของ elements <td> คือ left-aligned

CSS

table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 50px;
  text-align: center;   //ตัวอักษรอยู่ตรงกลาง
}
td{
  text-align: right;    //ตัวอักษรชิดขวา
}

Horizontal Alignment การจัดวางแนวนอน

Vertical Alignment การจัดตำแหน่งแนวตั้ง

[vertical-align: ………;] กำหนดคุณสมบัติของการจัดตำแหน่งแนวตั้ง (top bottom middle) ของเนื้อหาใน <th> หรือ <td> โดยพื้นฐานแล้วจะกำหนดเนื้อหาไว้ตรงกลาง

CSS

table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  height: 50px;
  text-align: center;    //ตรงกลาง
}
td{
  height: 50px;
  text-align: right;    //ชิดด้านขวา
  vertical-align: bottom;  //ชิดด้านล่าง
}

Vertical Alignment การจัดตำแหน่งแนวตั้ง

Table Padding กำหนดพื้นที่ของตัวเอง

ควบคุมระหว่าง border กับ content ใน Table ใช้คุณสมบัติ Padding บน element <td> และ <th>

CSS

table, td, th {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;   //ผลัก Border ออก 
  text-align: left;    //ตัวอักษรชิดซ้าย
}

Table Padding กำหนดพื้นที่ของตัวเอง

Horizontal Dividers วงเวียนแนวนอน

เพิ่มคุณสมบัติ [border-bottom: ……..;] เส้นด้านล่างหรือ [border-top: ……..;] เส้นด้านบน ให้ <th> และ <td> จาก Horizontal Dividers

CSS

table{
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;  //เส้นขอบด้านล่าง
}

Horizontal Dividers วงเวียนแนวนอน

Hoverable Table

ใช้ [:hover] เลือกบน <tr> ให้เลื่อนเม้าส์ไป highlight แถวตาราง

CSS

table{
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}
tr:hover{
  background-color: rgb(196, 216, 241);   //เมื่อนำเม้าส์ไป Hover จะมีสีพื้นหลังที่ต่างกัน
}

Hoverable Table

Striped Tables ตารางทางม้าลาย

สำหรับตารางทางม้าลายใช้ [nth-child()] และเพิ่ม [background-color: …….;]

CSS

table{
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}
tr:nth-child(even){
  background-color: rgb(196, 216, 241);   //ตารางแบบทางม้าลาย
}

Striped Tables ตารางทางม้าลาย

Table Color สีตาราง

สามารถระบุสีพื้นหลัง และ สีตัวอักษร ของelement <th>

CSS

table{
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}
tr:nth-child(even){
  background-color: rgb(196, 216, 241);
}
th{
  background-color: green;  //พื้นหลังหัวข้อเป็นสีเขียว
  color: black;             //สีของตัวอักษรเป็นสีดำ
}

Table Color สีตาราง

Responsive Table ตารางตอบสนอง

ตารางตอบสนอง จะแสดงแถบเลื่อนแนวนอน หากหน้าจอมีขนาดเล็กเกินไปที่จะแสดงเนื้อหาแบบเต็ม

HTML

<div style="overflow-x:auto;">  // x คือแนวนอน แบบอัตโนมัติ
  <table>         //ตาราง
    <tr>            // <tr> แถวที่ 1
      <th>First Name</th>   //<th> คอลัมน์หัวข้อ
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>           // <tr> แถวที่ 2
      <td>Jill</td>   // <th> คอลัมน์ข้อย่อย
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>         // <tr> แถวที่ 3
      <td>Eve</td>      <th> คอลัมน์ข้อย่อย
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>          // <tr> แถวที่ 4
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

CSS

table{
  border-collapse: collapse;
  width: 100%;
}
th, td{
  padding: 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
}
tr:nth-child(even){
  background-color: rgb(196, 216, 241);
}
th{
  background-color: green;
  color: black;
}

Responsive Table ตารางตอบสนอง

สำหรับตารางก็จะประมาณนี้ ตำแหน่ง สี รูปแบบ Hover บลาบลาบาล ไว้ลองทำกันดูเน้อ บ๊ะบายง่วงแล้วววว ^_^ เจอกันอีกทีเรื่อง CSS Display