Table AEM examples

Resize your browser to view breakpoint behavior.

TABLE EXAMPLE 1

Heading

This example table has column headers.
Zebra striping is not applied.
Table width is set to 100%.
Table cell padding is set to Default.
Content outside the table but within the pattern (Headline, Description, CTAs) are set to align left.

Header 1	Header 2	Header 3	Header 4	Header 5
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell

Primary CTA Text CTA

TABLE EXAMPLE 2

Heading

This example table has column and row headers.
Zebra striping is applied.
Table width is set to 100%.
Column width is Fixed.
Table cell padding is set to Dense.
Content outside the table but within the pattern (Headline, Description, CTAs) are set to align center.

Header 1	Header 2	Header 3	Header 4	Header 5
Cell	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex.	Nam purus mauris, volutpat eu urna ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex. Integer eu urna ut nisl fringilla finibus ut vitae ligula.
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell

Text CTA

TABLE EXAMPLE 3

Heading

This example table has column and row headers.
Zebra striping is applied.
Table width is set to 100%.
Column width is Flexible.
Table cell padding is set to Dense.
Content outside the table but within the pattern (Headline, Description, CTAs) are set to align center.

Header 1	Header 2	Header 3	Header 4	Header 5
Cell	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex.	Nam purus mauris, volutpat eu urna ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex. Integer eu urna ut nisl fringilla finibus ut vitae ligula.
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell

Text CTA

TABLE EXAMPLE 4

Heading

This example table has column and row headers.
Zebra striping is applied.
Table width is set to Hug.
Column width is Flexible.
Table cell padding is set to Dense.
Content outside the table but within the pattern (Headline, Description, CTAs) are set to align center.

Header 1	Header 2	Header 3	Header 4	Header 5
Cell	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex.	Nam purus mauris, volutpat eu urna ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, ut nisl fringilla finibus ut vitae ligula.	Nam purus mauris, volutpat ut mi vel, pharetra bibendum sem. Vivamus et vestibulum ex. Integer eu urna ut nisl fringilla finibus ut vitae ligula.
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell

Text CTA