Layout Table Design issues

  • Use role="none" on just the table element.
  • Use only tr and td elements in table.
  • Make sure content is still understandable with table layout is disabled.

Layout Table Example

Page Title

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis sollicitudin lacus blandit auctor. Mauris tempus tincidunt semper. Ut in fringilla tellus. Vestibulum dapibus, mi in viverra mollis, ipsum nisl tincidunt libero, convallis placerat justo elit a ligula. Vivamus sed nibh ac est tempus iaculis. Etiam feugiat lobortis mauris ut varius. Integer sollicitudin lacinia adipiscing. Aenean ut purus ac quam tincidunt volutpat non vitae augue. Suspendisse sed libero at mauris gravida vehicula volutpat vel magna.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis sollicitudin lacus blandit auctor. Mauris tempus tincidunt semper. Ut in fringilla tellus. Vestibulum dapibus, mi in viverra mollis, ipsum nisl tincidunt libero, convallis placerat justo elit a ligula. Vivamus sed nibh ac est tempus iaculis. Etiam feugiat lobortis mauris ut varius. Integer sollicitudin lacinia adipiscing. Aenean ut purus ac quam tincidunt volutpat non vitae augue. Suspendisse sed libero at mauris gravida vehicula volutpat vel magna.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis sollicitudin lacus blandit auctor. Mauris tempus tincidunt semper. Ut in fringilla tellus. Vestibulum dapibus, mi in viverra mollis, ipsum nisl tincidunt libero, convallis placerat justo elit a ligula. Vivamus sed nibh ac est tempus iaculis. Etiam feugiat lobortis mauris ut varius. Integer sollicitudin lacinia adipiscing. Aenean ut purus ac quam tincidunt volutpat non vitae augue. Suspendisse sed libero at mauris gravida vehicula volutpat vel magna.

footer information

Source Code