วัน: 6 มกราคม 2023

แปลงโฉม Built-in Table Style ID ของ Microsoft Word สู่ CSS Framework ฉบับสมบูรณ์แปลงโฉม Built-in Table Style ID ของ Microsoft Word สู่ CSS Framework ฉบับสมบูรณ์

2023-01-062023-01-06| phunsanitphunsanit| 0 Comment | 07:00

สำหรับนักพัฒนาเว็บที่ต้องทำระบบแปลงเอกสาร Word (.docx) ไปเป็น HTML หรือต้องการจัดรูปแบบตารางบนเว็บไซต์ให้มีมาตรฐานและความเรียบร้อยเทียบเท่าแกลเลอรีสไตล์ใน Microsoft Word ความท้าทายหลักคือการแปลงรหัส Built-in Table Style ID ของมาตรฐาน OpenXML (ECMA-376) ให้กลายเป็นคลาส CSS ที่มีความยืดหยุ่น

บทความนี้ได้รวบรวมและสร้างสเปก CSS จำลองสไตล์ตารางมาตรฐานของ Microsoft Word ครบทั้งตระกูล Plain Tables, Grid Tables และ List Tables โดยใช้สถาปัตยกรรม CSS Custom Properties (CSS Variables) เลียนแบบระบบ Theme Colors และ Tint/Shade ของ Office ได้อย่างแม่นยำ

โครงสร้างชุดสี Theme Palette และสูตรคำนวณ Tint/Shade

ใน OpenXML ค่าสีของตารางจะไม่ใช้การ Hardcode แต่จะผูกกับตัวแปร accent1 ถึง accent6 และแปลงความสว่างด้วยการผสมสีขาว (Tint) เราสามารถจำลองพาเลตต์เริ่มต้นของ Microsoft 365 (Modern Theme) ได้ดังนี้

:root {
  /* Microsoft 365 Standard Theme Colors */
  --ms-dark1: #000000;
  --ms-light1: #ffffff;
  --ms-dark2: #242424;
  --ms-light2: #f5f5f5;
  --ms-border-neutral: #d1d1d1;

  /* Accent 1 - 6 */
  --ms-accent1: #0f6cbd;
  --ms-accent2: #115ea3;
  --ms-accent3: #004e8c;
  --ms-accent4: #0067b8;
  --ms-accent5: #4f6bed;
  --ms-accent6: #6264a7;

  /* Tint 20% สำหรับ Banded Rows (ผสมสีขาว 80%) */
  --ms-accent1-tint20: #cfe4fa;
  --ms-accent2-tint20: #cfe1f5;
  --ms-accent3-tint20: #cce0f0;
  --ms-accent4-tint20: #cce5f7;
  --ms-accent5-tint20: #dee4fc;
  --ms-accent6-tint20: #e2e2f2;

  /* Tint 40% สำหรับเส้นขอบและเฉดสีรอง */
  --ms-accent1-tint40: #9fc9f6;
  --ms-accent2-tint40: #9fc3ec;
  --ms-accent3-tint40: #99c2e1;
  --ms-accent4-tint40: #99cbee;
  --ms-accent5-tint40: #bdc9f9;
  --ms-accent6-tint40: #c5c5e5;
}

CSS Framework จำลองทุก Built-in Table Style ID

โครงสร้าง CSS ด้านล่างนี้ถูกออกแบบให้ตรงกับชื่อคลาสตาม Style ID ของ OpenXML โดยคำนึงถึงเงื่อนไขของ TableLook เช่น thead สำหรับ First Row, tfoot สำหรับ Total Row, th:first-child สำหรับ First Column และ tbody tr:nth-child(even) สำหรับ Banded Rows

/* ==========================================================================
   0. Base Table Reset (เทียบเท่าคุณสมบัติพื้นฐานทั้งตาราง)
   ========================================================================== */
table[class*="Table"],
table[class*="PlainTable"],
table[class*="GridTable"],
table[class*="ListTable"] {
  width: 100%;
  border-collapse: collapse;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ms-dark2);
  margin: 1.5rem 0;
}

table[class*="Table"] th,
table[class*="Table"] td,
table[class*="PlainTable"] th,
table[class*="PlainTable"] td,
table[class*="GridTable"] th,
table[class*="GridTable"] td,
table[class*="ListTable"] th,
table[class*="ListTable"] td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
}

/* ==========================================================================
   1. Plain Tables
   ========================================================================== */
/* TableNormal: ตารางเปล่า ไร้เส้นกรอบและสีพื้น */
.TableNormal th,
.TableNormal td {
  border: none;
  background: transparent;
}

/* TableGrid: ตารางกริดมาตรฐาน มีเส้นรอบด้านสีเทากลาง */
.TableGrid th,
.TableGrid td {
  border: 1px solid var(--ms-border-neutral);
}

/* PlainTable1: ตารางเรียบง่าย มีเฉพาะเส้นขอบบน-ล่าง */
.PlainTable1 {
  border-top: 1px solid var(--ms-dark1);
  border-bottom: 1px solid var(--ms-dark1);
}
.PlainTable1 th, .PlainTable1 td { border: none; }

/* PlainTable2: มีเส้นขอบบางรอบนอกและเส้นคั่นหัวตาราง */
.PlainTable2 {
  border: 1px solid var(--ms-border-neutral);
}
.PlainTable2 thead th {
  border-bottom: 1px solid var(--ms-border-neutral);
  font-weight: 600;
}

/* PlainTable3: เส้นขอบหนาด้านบน-ล่าง */
.PlainTable3 {
  border-top: 2px solid var(--ms-dark1);
  border-bottom: 2px solid var(--ms-dark1);
}
.PlainTable3 thead th {
  border-bottom: 1px solid var(--ms-border-neutral);
}

/* PlainTable4: เส้นประแบ่งแถว */
.PlainTable4 thead th {
  border-bottom: 2px solid var(--ms-dark1);
}
.PlainTable4 tbody tr td {
  border-bottom: 1px dashed var(--ms-border-neutral);
}

/* PlainTable5: เส้นคู่ด้านล่างสำหรับสรุปผล */
.PlainTable5 thead th { border-bottom: 1px solid var(--ms-dark1); }
.PlainTable5 tfoot tr td {
  border-top: 1px solid var(--ms-dark1);
  border-bottom: 3px double var(--ms-dark1);
  font-weight: 700;
}

/* ==========================================================================
   2. Grid Tables (Light)
   ========================================================================== */
.GridTable1Light th,
.GridTable1Light td {
  border: 1px solid var(--ms-border-neutral);
}
.GridTable1Light thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--ms-border-neutral);
}

/* Template สร้าง Accent 1 - 6 สำหรับ GridTable1Light */
.GridTable1Light-Accent1 { --cur-accent: var(--ms-accent1); }
.GridTable1Light-Accent2 { --cur-accent: var(--ms-accent2); }
.GridTable1Light-Accent3 { --cur-accent: var(--ms-accent3); }
.GridTable1Light-Accent4 { --cur-accent: var(--ms-accent4); }
.GridTable1Light-Accent5 { --cur-accent: var(--ms-accent5); }
.GridTable1Light-Accent6 { --cur-accent: var(--ms-accent6); }

[class*="GridTable1Light-Accent"] th,
[class*="GridTable1Light-Accent"] td {
  border: 1px solid var(--cur-accent);
}
[class*="GridTable1Light-Accent"] thead th {
  font-weight: 600;
  color: var(--cur-accent);
  border-bottom: 2px solid var(--cur-accent);
}

/* ==========================================================================
   3. Grid Tables (Medium: สไตล์ยอดนิยม แถบหัวสีทึบ + แถวสลับ)
   ========================================================================== */
.GridTable2-Accent1, .GridTable4-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); --cur-border: var(--ms-accent1-tint40); }
.GridTable2-Accent2, .GridTable4-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); --cur-border: var(--ms-accent2-tint40); }
.GridTable2-Accent3, .GridTable4-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); --cur-border: var(--ms-accent3-tint40); }
.GridTable2-Accent4, .GridTable4-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); --cur-border: var(--ms-accent4-tint40); }
.GridTable2-Accent5, .GridTable4-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); --cur-border: var(--ms-accent5-tint40); }
.GridTable2-Accent6, .GridTable4-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); --cur-border: var(--ms-accent6-tint40); }

/* GridTable2: หัวตารางทึบ มีเส้นกรอบรอบด้าน แถวสลับเว้นสี */
[class*="GridTable2-Accent"] th,
[class*="GridTable2-Accent"] td {
  border: 1px solid var(--cur-border);
}
[class*="GridTable2-Accent"] thead th {
  background-color: var(--cur-accent);
  color: var(--ms-light1);
  font-weight: 600;
}
[class*="GridTable2-Accent"] tbody tr:nth-child(even) {
  background-color: var(--cur-tint);
}
[class*="GridTable2-Accent"] tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cur-accent);
  border-bottom: 3px double var(--cur-accent);
}

/* GridTable4: เพิ่มการเน้น First Column (คอลัมน์แรก) */
[class*="GridTable4-Accent"] th,
[class*="GridTable4-Accent"] td {
  border: 1px solid var(--cur-border);
}
[class*="GridTable4-Accent"] thead th {
  background-color: var(--cur-accent);
  color: var(--ms-light1);
  font-weight: 600;
}
[class*="GridTable4-Accent"] tbody tr:nth-child(even) {
  background-color: var(--cur-tint);
}
[class*="GridTable4-Accent"] tbody td:first-child {
  font-weight: 600;
  color: var(--cur-accent);
}

/* ==========================================================================
   4. Grid Tables (Dark / Colorful)
   ========================================================================== */
.GridTable6Colorful-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); }
.GridTable6Colorful-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); }
.GridTable6Colorful-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); }
.GridTable6Colorful-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); }
.GridTable6Colorful-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); }
.GridTable6Colorful-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); }

[class*="GridTable6Colorful-Accent"] thead th {
  background-color: var(--cur-accent);
  color: var(--ms-light1);
  border: 1px solid var(--ms-light1);
}
[class*="GridTable6Colorful-Accent"] tbody tr:nth-child(odd) {
  background-color: var(--cur-tint);
}
[class*="GridTable6Colorful-Accent"] tbody tr:nth-child(even) {
  background-color: var(--ms-light1);
}
[class*="GridTable6Colorful-Accent"] td {
  border: 1px solid var(--ms-light1);
}

/* ==========================================================================
   5. List Tables (ตัดเส้นแนวตั้งทิ้งทั้งหมด)
   ========================================================================== */
/* ตัวปรับคุณสมบัติเฉพาะของ List Tables ทุกตัว */
[class*="ListTable"] th,
[class*="ListTable"] td {
  border-left: none !important;
  border-right: none !important;
}

/* ListTable1: เส้นขีดแนวนอนเรียบง่าย */
.ListTable1Light thead th {
  border-top: 1px solid var(--ms-dark1);
  border-bottom: 1px solid var(--ms-dark1);
  font-weight: 600;
}
.ListTable1Light tbody td {
  border-bottom: 1px solid var(--ms-light2);
}
.ListTable1Light tfoot td {
  border-top: 1px solid var(--ms-dark1);
  border-bottom: 2px solid var(--ms-dark1);
}

/* ListTable3: หัวตารางทึบ แถวสลับสี ไร้เส้นแนวตั้ง */
.ListTable3-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); }
.ListTable3-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); }
.ListTable3-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); }
.ListTable3-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); }
.ListTable3-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); }
.ListTable3-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); }

[class*="ListTable3-Accent"] thead th {
  background-color: var(--cur-accent);
  color: var(--ms-light1);
  border-bottom: none;
  font-weight: 600;
}
[class*="ListTable3-Accent"] tbody tr:nth-child(even) {
  background-color: var(--cur-tint);
}
[class*="ListTable3-Accent"] tbody td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[class*="ListTable3-Accent"] tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cur-accent);
  border-bottom: 1px solid var(--cur-accent);
}

ตัวอย่างการนำไปใช้งานบน HTML / WordPress

สามารถนำคลาสเหล่านี้ไปใส่ในแท็ก <table> ของคุณได้ทันที โดยโครงสร้างตาราง HTML ที่รองรับคุณสมบัติครบถ้วนควรมีทั้ง <thead>, <tbody> และ <tfoot> ดังตัวอย่าง

<!-- ตัวอย่างการเรียกใช้ Grid Table 2 - Accent 1 -->
<table class="GridTable2-Accent1">
  <thead>
    <tr>
      <th>รหัสรายการ</th>
      <th>รายละเอียดงาน</th>
      <th>ผู้รับผิดชอบ</th>
      <th>สถานะ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TASK-101</td>
      <td>ออกแบบสถาปัตยกรรมระบบ</td>
      <td>System Analyst</td>
      <td>เสร็จสิ้น</td>
    </tr>
    <tr>
      <td>TASK-102</td>
      <td>พัฒนาโมดูล Export OpenXML</td>
      <td>Developer</td>
      <td>กำลังดำเนินการ</td>
    </tr>
    <tr>
      <td>TASK-103</td>
      <td>ตรวจสอบและทดสอบคุณภาพ CSS</td>
      <td>QA Tester</td>
      <td>รอดำเนินการ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">รวมรายการทั้งหมด</td>
      <td>3 รายการ</td>
    </tr>
  </tfoot>
</table>

สรุปจุดสำคัญในการแปลง OpenXML สู่ CSS

  • Banded Rows: จำลองได้ง่ายด้วย :nth-child(even) บน <tbody> ช่วยให้อ่านข้อมูลแนวยาวได้สบายตา
  • List Tables: จุดเด่นคือการใช้คำสั่ง border-left: none และ border-right: none เพื่อให้ได้สไตล์แบบมินิมอลที่กำลังเป็นที่นิยมใน Web Dashboard
  • Theming Support: เมื่อสร้างตัวแปรครอบด้วย CSS Custom Properties หากต้องการเปลี่ยนธีมเอกสารทั้งหน้าเว็บเป็นแบบคลาสสิก (Office 2013–2022) ก็เพียงแค่แก้ค่าสีของ --ms-accent1 ถึง --ms-accent6 ที่ :root ตารางทุกสไตล์จะเปลี่ยนสีตามทันทีโดยไม่ต้องแก้ไข CSS Classes รายตัว

Microsoft Word Built-in Table Styles Catalog.html

<!DOCTYPE html>
<html lang="th">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Microsoft Word Built-in Table Styles Catalog</title>
	<style>
		:root {
			/* Microsoft 365 Theme Colors */
			--ms-dark1: #000000;
			--ms-light1: #ffffff;
			--ms-dark2: #242424;
			--ms-light2: #f5f5f5;
			--ms-border: #d1d1d1;

			/* Accent 1 - 6 */
			--ms-accent1: #0f6cbd;
			--ms-accent2: #115ea3;
			--ms-accent3: #004e8c;
			--ms-accent4: #0067b8;
			--ms-accent5: #4f6bed;
			--ms-accent6: #6264a7;

			/* Tint 20% สำหรับ Banded Rows */
			--ms-accent1-tint20: #cfe4fa;
			--ms-accent2-tint20: #cfe1f5;
			--ms-accent3-tint20: #cce0f0;
			--ms-accent4-tint20: #cce5f7;
			--ms-accent5-tint20: #dee4fc;
			--ms-accent6-tint20: #e2e2f2;

			/* Tint 40% สำหรับเส้นขอบ */
			--ms-accent1-tint40: #9fc9f6;
			--ms-accent2-tint40: #9fc3ec;
			--ms-accent3-tint40: #99c2e1;
			--ms-accent4-tint40: #99cbee;
			--ms-accent5-tint40: #bdc9f9;
			--ms-accent6-tint40: #c5c5e5;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
			padding: 2.5rem 5%;
			color: var(--ms-dark2);
			background-color: #fafafa;
			line-height: 1.6;
		}

		h1 {
			text-align: center;
			margin-bottom: 2rem;
			color: var(--ms-dark1);
		}

		h2 {
			margin-top: 2rem;
			margin-bottom: 0.75rem;
			font-size: 1.25rem;
			color: #333333;
		}

		hr {
			border: 0;
			border-top: 1px solid #e0e0e0;
			margin: 2.5rem 0;
		}

		/* Base Table Structure */
		table {
			width: 100%;
			border-collapse: collapse;
			font-size: 14px;
			background: var(--ms-light1);
			margin-bottom: 1rem;
		}

		th, td {
			padding: 10px 14px;
			text-align: left;
			vertical-align: middle;
		}

		/* 1. Plain Tables */
		.TableNormal th, .TableNormal td { border: none; background: transparent; }

		.TableGrid th, .TableGrid td { border: 1px solid var(--ms-border); }

		.PlainTable1 { border-top: 1px solid var(--ms-dark1); border-bottom: 1px solid var(--ms-dark1); }
		.PlainTable1 th, .PlainTable1 td { border: none; }

		.PlainTable2 { border: 1px solid var(--ms-border); }
		.PlainTable2 thead th { border-bottom: 1px solid var(--ms-border); font-weight: 600; }

		.PlainTable3 { border-top: 2px solid var(--ms-dark1); border-bottom: 2px solid var(--ms-dark1); }
		.PlainTable3 thead th { border-bottom: 1px solid var(--ms-border); font-weight: 600; }

		.PlainTable4 thead th { border-bottom: 2px solid var(--ms-dark1); font-weight: 600; }
		.PlainTable4 tbody td { border-bottom: 1px dashed var(--ms-border); }

		.PlainTable5 thead th { border-bottom: 1px solid var(--ms-dark1); font-weight: 600; }
		.PlainTable5 tfoot td { border-top: 1px solid var(--ms-dark1); border-bottom: 3px double var(--ms-dark1); font-weight: bold; }

		/* 2. Grid Tables (Light) */
		.GridTable1Light th, .GridTable1Light td { border: 1px solid var(--ms-border); }
		.GridTable1Light thead th { border-bottom: 2px solid var(--ms-border); font-weight: 600; }

		.GridTable1Light-Accent1 { --cur-accent: var(--ms-accent1); }
		.GridTable1Light-Accent2 { --cur-accent: var(--ms-accent2); }
		.GridTable1Light-Accent3 { --cur-accent: var(--ms-accent3); }
		.GridTable1Light-Accent4 { --cur-accent: var(--ms-accent4); }
		.GridTable1Light-Accent5 { --cur-accent: var(--ms-accent5); }
		.GridTable1Light-Accent6 { --cur-accent: var(--ms-accent6); }

		[class*="GridTable1Light-Accent"] th,
		[class*="GridTable1Light-Accent"] td { border: 1px solid var(--cur-accent); }
		[class*="GridTable1Light-Accent"] thead th { color: var(--cur-accent); font-weight: 600; border-bottom: 2px solid var(--cur-accent); }

		/* 3. Grid Tables (Medium) */
		.GridTable2-Accent1, .GridTable4-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); --cur-border: var(--ms-accent1-tint40); }
		.GridTable2-Accent2, .GridTable4-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); --cur-border: var(--ms-accent2-tint40); }
		.GridTable2-Accent3, .GridTable4-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); --cur-border: var(--ms-accent3-tint40); }
		.GridTable2-Accent4, .GridTable4-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); --cur-border: var(--ms-accent4-tint40); }
		.GridTable2-Accent5, .GridTable4-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); --cur-border: var(--ms-accent5-tint40); }
		.GridTable2-Accent6, .GridTable4-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); --cur-border: var(--ms-accent6-tint40); }

		[class*="GridTable2-Accent"] th, [class*="GridTable2-Accent"] td { border: 1px solid var(--cur-border); }
		[class*="GridTable2-Accent"] thead th { background-color: var(--cur-accent); color: var(--ms-light1); font-weight: 600; }
		[class*="GridTable2-Accent"] tbody tr:nth-child(even) { background-color: var(--cur-tint); }
		[class*="GridTable2-Accent"] tfoot td { font-weight: bold; border-top: 2px solid var(--cur-accent); border-bottom: 3px double var(--cur-accent); }

		[class*="GridTable4-Accent"] th, [class*="GridTable4-Accent"] td { border: 1px solid var(--cur-border); }
		[class*="GridTable4-Accent"] thead th { background-color: var(--cur-accent); color: var(--ms-light1); font-weight: 600; }
		[class*="GridTable4-Accent"] tbody tr:nth-child(even) { background-color: var(--cur-tint); }
		[class*="GridTable4-Accent"] tbody td:first-child { font-weight: 600; color: var(--cur-accent); }
		[class*="GridTable4-Accent"] tfoot td { font-weight: bold; border-top: 2px solid var(--cur-accent); border-bottom: 3px double var(--cur-accent); }

		/* 4. Grid Tables (Dark / Colorful) */
		.GridTable6Colorful-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); }
		.GridTable6Colorful-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); }
		.GridTable6Colorful-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); }
		.GridTable6Colorful-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); }
		.GridTable6Colorful-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); }
		.GridTable6Colorful-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); }

		[class*="GridTable6Colorful-Accent"] thead th { background-color: var(--cur-accent); color: var(--ms-light1); border: 1px solid var(--ms-light1); font-weight: 600; }
		[class*="GridTable6Colorful-Accent"] tbody tr:nth-child(odd) { background-color: var(--cur-tint); }
		[class*="GridTable6Colorful-Accent"] tbody tr:nth-child(even) { background-color: var(--ms-light1); }
		[class*="GridTable6Colorful-Accent"] td { border: 1px solid var(--ms-light1); }

		/* 5. List Tables (ตัดเส้นแนวตั้งออกทั้งหมด) */
		[class*="ListTable"] th, [class*="ListTable"] td { border-left: none !important; border-right: none !important; }

		.ListTable1Light thead th { border-top: 1px solid var(--ms-dark1); border-bottom: 1px solid var(--ms-dark1); font-weight: 600; }
		.ListTable1Light tbody td { border-bottom: 1px solid var(--ms-light2); }
		.ListTable1Light tfoot td { border-top: 1px solid var(--ms-dark1); border-bottom: 2px solid var(--ms-dark1); font-weight: bold; }

		.ListTable3-Accent1 { --cur-accent: var(--ms-accent1); --cur-tint: var(--ms-accent1-tint20); }
		.ListTable3-Accent2 { --cur-accent: var(--ms-accent2); --cur-tint: var(--ms-accent2-tint20); }
		.ListTable3-Accent3 { --cur-accent: var(--ms-accent3); --cur-tint: var(--ms-accent3-tint20); }
		.ListTable3-Accent4 { --cur-accent: var(--ms-accent4); --cur-tint: var(--ms-accent4-tint20); }
		.ListTable3-Accent5 { --cur-accent: var(--ms-accent5); --cur-tint: var(--ms-accent5-tint20); }
		.ListTable3-Accent6 { --cur-accent: var(--ms-accent6); --cur-tint: var(--ms-accent6-tint20); }

		[class*="ListTable3-Accent"] thead th { background-color: var(--cur-accent); color: var(--ms-light1); border-bottom: none; font-weight: 600; }
		[class*="ListTable3-Accent"] tbody tr:nth-child(even) { background-color: var(--cur-tint); }
		[class*="ListTable3-Accent"] tbody td { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
		[class*="ListTable3-Accent"] tfoot td { font-weight: bold; border-top: 2px solid var(--cur-accent); border-bottom: 1px solid var(--cur-accent); }
	</style>
</head>
<body>

	<h1>Microsoft Word Built-in Table Styles Catalog</h1>

	<!-- 1. Plain Tables -->
	<h2>TableNormal</h2>
	<table class="TableNormal">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>TableGrid</h2>
	<table class="TableGrid">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>PlainTable1</h2>
	<table class="PlainTable1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>PlainTable2</h2>
	<table class="PlainTable2">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>PlainTable3</h2>
	<table class="PlainTable3">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>PlainTable4</h2>
	<table class="PlainTable4">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>PlainTable5</h2>
	<table class="PlainTable5">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<!-- 2. Grid Tables (Light) -->
	<h2>GridTable1Light</h2>
	<table class="GridTable1Light">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent1</h2>
	<table class="GridTable1Light-Accent1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent2</h2>
	<table class="GridTable1Light-Accent2">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent3</h2>
	<table class="GridTable1Light-Accent3">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent4</h2>
	<table class="GridTable1Light-Accent4">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent5</h2>
	<table class="GridTable1Light-Accent5">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable1Light-Accent6</h2>
	<table class="GridTable1Light-Accent6">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿33,000.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<!-- 3. Grid Tables (Medium) -->
	<h2>GridTable2-Accent1</h2>
	<table class="GridTable2-Accent1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable2-Accent2</h2>
	<table class="GridTable2-Accent2">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable2-Accent3</h2>
	<table class="GridTable2-Accent3">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable2-Accent4</h2>
	<table class="GridTable2-Accent4">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable2-Accent5</h2>
	<table class="GridTable2-Accent5">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable2-Accent6</h2>
	<table class="GridTable2-Accent6">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable4-Accent1</h2>
	<table class="GridTable4-Accent1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<!-- 4. Grid Tables (Dark / Colorful) -->
	<h2>GridTable6Colorful-Accent1</h2>
	<table class="GridTable6Colorful-Accent1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>GridTable6Colorful-Accent2</h2>
	<table class="GridTable6Colorful-Accent2">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<!-- 5. List Tables -->
	<h2>ListTable1Light</h2>
	<table class="ListTable1Light">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>ListTable3-Accent1</h2>
	<table class="ListTable3-Accent1">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>ListTable3-Accent2</h2>
	<table class="ListTable3-Accent2">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

	<hr>

	<h2>ListTable3-Accent6</h2>
	<table class="ListTable3-Accent6">
		<thead>
			<tr><th>รหัสสินค้า</th><th>ชื่อรายการ</th><th>จำนวน</th><th>ราคาต่อหน่วย</th></tr>
		</thead>
		<tbody>
			<tr><td>SKU-001</td><td>Cloud Service Subscription</td><td>12</td><td>฿1,500.00</td></tr>
			<tr><td>SKU-002</td><td>Managed Security Module</td><td>1</td><td>฿15,000.00</td></tr>
			<tr><td>SKU-003</td><td>Data Backup Solution</td><td>6</td><td>฿2,400.00</td></tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">รวมทั้งสิ้น</td><td>฿47,400.00</td></tr>
		</tfoot>
	</table>

</body>
</html>
Read MoreRead More