From d16d10bf20eb7211ff46ee9c1fb58fc072f717a5 Mon Sep 17 00:00:00 2001 From: krish1434 Date: Tue, 5 Aug 2025 23:38:05 +0530 Subject: [PATCH] improve table styling --- tables.html | 488 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 487 insertions(+), 1 deletion(-) diff --git a/tables.html b/tables.html index e867d9692..082a147fe 100644 --- a/tables.html +++ b/tables.html @@ -364,7 +364,493 @@
-

Tables

+

Normal Table

+

+ This section displays a basic HTML table without any advanced features like search, pagination, or sorting. + It's ideal for showing simple, static tabular data in a clean and readable format. +

+ + + +
+
+
Tables Example
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
+
+
+
+ +
+ + +
+ + +

Dark Table

+

+ Apply the .table-dark class to invert table colors, rendering light-colored text on a dark background. +

+ + + +
+
+
Dark Tables Example
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
+
+
+
+ +
+ + +
+ + +

Table head example

+

+ Just like with tables, you can style elements using the modifier classes .thead-light or .thead-dark to give them a light or dark gray background. +

+ + + +
+
+
Table head Example
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
NamePositionOfficeAgeStart dateSalary
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
+
+
+
+ +
+ + +
+ + +

Striped rows

+

+ Use the .table-striped class to add zebra-striping to table rows within the section. +

+ + + +
+
+
Striped rows
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
+
+
+
+ +
+ + +
+ + +

Dark striped rows

+

+ Use the .table-striped .table-dark class to add zebra-striping to table rows within the section. +

+ + + +
+
+
Dark striped rows
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
+
+
+
+ +
+ + +
+ + +

Data Tables

DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the official DataTables documentation.