8253117: Replace HTML tables in javadoc summaries with CSS grid elements

Reviewed-by: jjg

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/AbstractMemberWriter.java

@@ -313,9 +313,8 @@ public abstract class AbstractMemberWriter implements MemberSummaryWriter, Membe
             return;
         }
         boolean printedUseTableHeader = false;
-        Table useTable = new Table(HtmlStyle.useSummary, HtmlStyle.summaryTable)
+        Table useTable = new Table(HtmlStyle.summaryTable)
                 .setCaption(heading)
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast);
         for (Element element : members) {
             TypeElement te = (typeElement == null)

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/AllClassesIndexWriter.java

@@ -120,9 +120,8 @@ public class AllClassesIndexWriter extends HtmlDocletWriter {
      * @param content HtmlTree content to which the links will be added
      */
     protected void addContents(Content content) {
-        Table table = new Table(HtmlStyle.typeSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setHeader(new TableHeader(contents.classLabel, contents.descriptionLabel))
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast)
                 .setId("all-classes-table")
                 .setDefaultTab(resources.getText("doclet.All_Classes"))
@@ -131,8 +130,7 @@ public class AllClassesIndexWriter extends HtmlDocletWriter {
                 .addTab(resources.enumSummary, utils::isEnum)
                 .addTab(resources.exceptionSummary, e -> utils.isException((TypeElement)e))
                 .addTab(resources.errorSummary, e -> utils.isError((TypeElement)e))
-                .addTab(resources.annotationTypeSummary, utils::isAnnotationType)
-                .setTabScript(i -> "show(" + i + ");");
+                .addTab(resources.annotationTypeSummary, utils::isAnnotationType);
         for (Character unicode : indexBuilder.getFirstCharacters()) {
             for (IndexItem indexItem : indexBuilder.getItems(unicode)) {
                 TypeElement typeElement = (TypeElement) indexItem.getElement();

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/AllPackagesIndexWriter.java

@@ -104,7 +104,7 @@ public class AllPackagesIndexWriter extends HtmlDocletWriter {
      * @param content HtmlTree content to which the links will be added
      */
     protected void addPackages(Content content) {
-        Table table = new Table(HtmlStyle.packagesSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(new StringContent(resources.packageSummary))
                 .setHeader(new TableHeader(contents.packageLabel, contents.descriptionLabel))
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/AnnotationTypeRequiredMemberWriterImpl.java

@@ -164,10 +164,9 @@ public class AnnotationTypeRequiredMemberWriterImpl extends AbstractMemberWriter
 
     @Override
     protected Table createSummaryTable() {
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setCaption(getCaption())
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast);
     }
 

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/ClassUseWriter.java

@@ -144,6 +144,7 @@ public class ClassUseWriter extends SubWriterHolderWriter {
 
         methodSubWriter = new MethodWriterImpl(this);
         constrSubWriter = new ConstructorWriterImpl(this);
+        constrSubWriter.setFoundNonPubConstructor(true);
         fieldSubWriter = new FieldWriterImpl(this);
         classSubWriter = new NestedClassWriterImpl(this);
         this.navBar = new Navigation(typeElement, configuration, PageMode.USE, path);
@@ -261,7 +262,7 @@ public class ClassUseWriter extends SubWriterHolderWriter {
                 "doclet.ClassUse_Packages.that.use.0",
                 getLink(new LinkInfoImpl(configuration,
                         LinkInfoImpl.Kind.CLASS_USE_HEADER, typeElement)));
-        Table table = new Table(HtmlStyle.useSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(caption)
                 .setHeader(getPackageTableHeader())
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);
@@ -287,7 +288,7 @@ public class ClassUseWriter extends SubWriterHolderWriter {
                 getLink(new LinkInfoImpl(configuration,
                         LinkInfoImpl.Kind.CLASS_USE_HEADER, typeElement)));
 
-        Table table = new Table(HtmlStyle.useSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(caption)
                 .setHeader(getPackageTableHeader())
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/ConstantsSummaryWriterImpl.java

@@ -205,10 +205,9 @@ public class ConstantsSummaryWriterImpl extends HtmlDocletWriter implements Cons
         }
         caption.add(classlink);
 
-        Table table = new Table(HtmlStyle.constantsSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(caption)
                 .setHeader(constantsTableHeader)
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast);
 
         for (VariableElement field : fields) {

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/ConstructorWriterImpl.java

@@ -185,21 +185,18 @@ public class ConstructorWriterImpl extends AbstractExecutableMemberWriter
     @Override
     protected Table createSummaryTable() {
         List<HtmlStyle> bodyRowStyles;
-        int rowScopeColumn;
 
         if (foundNonPubConstructor) {
             bodyRowStyles = Arrays.asList(HtmlStyle.colFirst, HtmlStyle.colConstructorName,
                     HtmlStyle.colLast);
-            rowScopeColumn = 1;
         } else {
             bodyRowStyles = Arrays.asList(HtmlStyle.colConstructorName, HtmlStyle.colLast);
-            rowScopeColumn = 0;
         }
 
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(
+                HtmlStyle.summaryTable)
                 .setCaption(contents.constructors)
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setRowScopeColumn(rowScopeColumn)
                 .setColumnStyles(bodyRowStyles);
     }
 

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/DeprecatedListWriter.java

@@ -370,7 +370,7 @@ public class DeprecatedListWriter extends SubWriterHolderWriter {
             String tableSummary, TableHeader tableHeader, Content contentTree) {
         if (deprList.size() > 0) {
             Content caption = contents.getContent(headingKey);
-            Table table = new Table(HtmlStyle.deprecatedSummary, HtmlStyle.summaryTable)
+            Table table = new Table(HtmlStyle.summaryTable)
                     .setCaption(caption)
                     .setHeader(tableHeader)
                     .setId(id)

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/EnumConstantWriterImpl.java

@@ -142,7 +142,7 @@ public class EnumConstantWriterImpl extends AbstractMemberWriter
 
     @Override
     protected Table createSummaryTable() {
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setCaption(contents.getContent("doclet.Enum_Constants"))
                 .setHeader(getSummaryTableHeader(typeElement))
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/FieldWriterImpl.java

@@ -147,10 +147,9 @@ public class FieldWriterImpl extends AbstractMemberWriter
         List<HtmlStyle> bodyRowStyles = Arrays.asList(HtmlStyle.colFirst, HtmlStyle.colSecond,
                 HtmlStyle.colLast);
 
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setCaption(contents.fields)
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setRowScopeColumn(1)
                 .setColumnStyles(bodyRowStyles);
     }
 

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/MethodWriterImpl.java

@@ -191,9 +191,8 @@ public class MethodWriterImpl extends AbstractExecutableMemberWriter
 
     @Override
     protected Table createSummaryTable() {
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast)
                 .setId("method-summary-table")
                 .setDefaultTab(resources.getText("doclet.All_Methods"))
@@ -204,8 +203,7 @@ public class MethodWriterImpl extends AbstractExecutableMemberWriter
                         e -> !utils.isAbstract(e) && !utils.isInterface(e.getEnclosingElement()))
                 .addTab(resources.getText("doclet.Default_Methods"), utils::isDefault)
                 .addTab(resources.getText("doclet.Deprecated_Methods"),
-                        e -> utils.isDeprecated(e) || utils.isDeprecated(typeElement))
-                .setTabScript(i -> "show(" + i + ");");
+                        e -> utils.isDeprecated(e) || utils.isDeprecated(typeElement));
     }
 
     @Override

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/ModuleIndexWriter.java

@@ -90,13 +90,11 @@ public class ModuleIndexWriter extends AbstractOverviewIndexWriter {
 
         if (!groupModuleMap.keySet().isEmpty()) {
             TableHeader tableHeader = new TableHeader(contents.moduleLabel, contents.descriptionLabel);
-            Table table =  new Table(HtmlStyle.overviewSummary, HtmlStyle.summaryTable)
+            Table table =  new Table(HtmlStyle.summaryTable)
                     .setHeader(tableHeader)
                     .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast)
                     .setId("all-modules-table")
-                    .setDefaultTab(resources.getText("doclet.All_Modules"))
-                    .setTabScript(i -> "show(" + i + ");")
-                    .setTabId(i -> (i == 0) ? "t0" : ("t" + (1 << (i - 1))));
+                    .setDefaultTab(resources.getText("doclet.All_Modules"));
 
             // add the tabs in command-line order
             for (String groupName : configuration.group.getGroupList()) {

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/ModuleWriterImpl.java

@@ -450,13 +450,11 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
      * Get a table, with two columns.
      *
      * @param caption the table caption
-     * @param tableStyle the table style
      * @param tableHeader the table header
      * @return a content object
      */
-    private Table getTable2(Content caption, HtmlStyle tableStyle,
-            TableHeader tableHeader) {
-        return new Table(tableStyle, HtmlStyle.detailsTable)
+    private Table getTable2(Content caption, TableHeader tableHeader) {
+        return new Table(HtmlStyle.detailsTable)
                 .setCaption(caption)
                 .setHeader(tableHeader)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);
@@ -466,17 +464,13 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
      * Get a table, with three columns, with the second column being the defining column.
      *
      * @param caption the table caption
-     * @param tableSummary the summary for the table
-     * @param tableStyle the table style
      * @param tableHeader the table header
      * @return a content object
      */
-    private Table getTable3(Content caption, String tableSummary, HtmlStyle tableStyle,
-            TableHeader tableHeader) {
-        return new Table(tableStyle, HtmlStyle.detailsTable)
+    private Table getTable3(Content caption, TableHeader tableHeader) {
+        return new Table(HtmlStyle.detailsTable)
                 .setCaption(caption)
                 .setHeader(tableHeader)
-                .setRowScopeColumn(1)
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast);
     }
 
@@ -495,8 +489,7 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
                         text,
                         resources.getText("doclet.modules"));
                 Content caption = new StringContent(text);
-                Table table = getTable3(caption, tableSummary, HtmlStyle.requiresSummary,
-                            requiresTableHeader);
+                Table table = getTable3(caption, requiresTableHeader);
                 addModulesList(requires, table);
                 section.add(table);
             }
@@ -507,8 +500,7 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
                         amrText,
                         resources.getText("doclet.modules"));
                 Content amrCaption = new StringContent(amrText);
-                Table amrTable = getTable3(amrCaption, amrTableSummary, HtmlStyle.requiresSummary,
-                            requiresTableHeader);
+                Table amrTable = getTable3(amrCaption, requiresTableHeader);
                 addModulesList(indirectModules, amrTable);
                 section.add(amrTable);
             }
@@ -546,15 +538,13 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
                     new TableHeader(contents.fromLabel, contents.packagesLabel);
             if (display(indirectPackages)) {
                 String aepText = resources.getText("doclet.Indirect_Exports_Summary");
-                Table aepTable = getTable2(new StringContent(aepText),
-                        HtmlStyle.packagesSummary, indirectPackagesHeader);
+                Table aepTable = getTable2(new StringContent(aepText), indirectPackagesHeader);
                 addIndirectPackages(aepTable, indirectPackages);
                 section.add(aepTable);
             }
             if (display(indirectOpenPackages)) {
                 String aopText = resources.getText("doclet.Indirect_Opens_Summary");
-                Table aopTable = getTable2(new StringContent(aopText), HtmlStyle.packagesSummary,
-                        indirectPackagesHeader);
+                Table aopTable = getTable2(new StringContent(aopText), indirectPackagesHeader);
                 addIndirectPackages(aopTable, indirectOpenPackages);
                 section.add(aopTable);
             }
@@ -568,13 +558,12 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
      * @param li
      */
     public void addPackageSummary(HtmlTree li) {
-        Table table = new Table(HtmlStyle.packagesSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setId("package-summary-table")
                 .setDefaultTab(resources.getText("doclet.All_Packages"))
                 .addTab(resources.getText("doclet.Exported_Packages_Summary"), this::isExported)
                 .addTab(resources.getText("doclet.Opened_Packages_Summary"), this::isOpened)
-                .addTab(resources.getText("doclet.Concealed_Packages_Summary"), this::isConcealed)
-                .setTabScript(i -> String.format("show(%d);", i));
+                .addTab(resources.getText("doclet.Concealed_Packages_Summary"), this::isConcealed);
 
         // Determine whether to show the "Exported To" and "Opened To" columns,
         // based on whether such columns would provide "useful" info.
@@ -718,8 +707,7 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
                     new TableHeader(contents.typeLabel, contents.descriptionLabel);
             if (haveProvides) {
                 String label = resources.getText("doclet.Provides_Summary");
-                Table table = getTable2(new StringContent(label), HtmlStyle.providesSummary,
-                        usesProvidesTableHeader);
+                Table table = getTable2(new StringContent(label), usesProvidesTableHeader);
                 addProvidesList(table);
                 if (!table.isEmpty()) {
                     section.add(table);
@@ -727,8 +715,7 @@ public class ModuleWriterImpl extends HtmlDocletWriter implements ModuleSummaryW
             }
             if (haveUses){
                 String label = resources.getText("doclet.Uses_Summary");
-                Table table = getTable2(new StringContent(label), HtmlStyle.usesSummary,
-                        usesProvidesTableHeader);
+                Table table = getTable2(new StringContent(label), usesProvidesTableHeader);
                 addUsesList(table);
                 if (!table.isEmpty()) {
                     section.add(table);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/NestedClassWriterImpl.java

@@ -95,10 +95,9 @@ public class NestedClassWriterImpl extends AbstractMemberWriter
         List<HtmlStyle> bodyRowStyles = Arrays.asList(HtmlStyle.colFirst, HtmlStyle.colSecond,
                 HtmlStyle.colLast);
 
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setCaption(contents.getContent("doclet.Nested_Classes"))
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setRowScopeColumn(1)
                 .setColumnStyles(bodyRowStyles);
     }
 

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/PackageIndexWriter.java

@@ -91,13 +91,11 @@ public class PackageIndexWriter extends AbstractOverviewIndexWriter {
                 = configuration.group.groupPackages(packages);
 
         if (!groupPackageMap.keySet().isEmpty()) {
-            Table table =  new Table(HtmlStyle.overviewSummary, HtmlStyle.summaryTable)
+            Table table =  new Table(HtmlStyle.summaryTable)
                     .setHeader(getPackageTableHeader())
                     .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast)
                     .setId("all-packages-table")
-                    .setDefaultTab(resources.getText("doclet.All_Packages"))
-                    .setTabScript(i -> "show(" + i + ");")
-                    .setTabId(i -> (i == 0) ? "t0" : ("t" + (1 << (i - 1))));
+                    .setDefaultTab(resources.getText("doclet.All_Packages"));
 
             // add the tabs in command-line order
             for (String groupName : configuration.group.getGroupList()) {

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/PackageUseWriter.java

@@ -165,7 +165,7 @@ public class PackageUseWriter extends SubWriterHolderWriter {
         Content caption = contents.getContent(
                 "doclet.ClassUse_Packages.that.use.0",
                 getPackageLink(packageElement, utils.getPackageName(packageElement)));
-        Table table = new Table(HtmlStyle.useSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(caption)
                 .setHeader(getPackageTableHeader())
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);
@@ -204,7 +204,7 @@ public class PackageUseWriter extends SubWriterHolderWriter {
                     "doclet.ClassUse_Classes.in.0.used.by.1",
                     getPackageLink(packageElement, utils.getPackageName(packageElement)),
                     getPackageLink(usingPackage, utils.getPackageName(usingPackage)));
-            Table table = new Table(HtmlStyle.useSummary, HtmlStyle.summaryTable)
+            Table table = new Table(HtmlStyle.summaryTable)
                     .setCaption(caption)
                     .setHeader(classTableHeader)
                     .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/PackageWriterImpl.java

@@ -209,7 +209,7 @@ public class PackageWriterImpl extends HtmlDocletWriter
     public void addClassesSummary(SortedSet<TypeElement> classes, String label,
             TableHeader tableHeader, Content summaryContentTree) {
         if(!classes.isEmpty()) {
-            Table table = new Table(HtmlStyle.typeSummary, HtmlStyle.summaryTable)
+            Table table = new Table(HtmlStyle.summaryTable)
                     .setCaption(new StringContent(label))
                     .setHeader(tableHeader)
                     .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/PropertyWriterImpl.java

@@ -156,11 +156,10 @@ public class PropertyWriterImpl extends AbstractMemberWriter
 
     @Override
     protected Table createSummaryTable() {
-        return new Table(HtmlStyle.memberSummary, HtmlStyle.summaryTable)
+        return new Table(HtmlStyle.summaryTable)
                 .setCaption(contents.properties)
                 .setHeader(getSummaryTableHeader(typeElement))
-                .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast)
-                .setRowScopeColumn(1);
+                .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colSecond, HtmlStyle.colLast);
     }
 
     @Override

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/SystemPropertiesWriter.java

@@ -136,7 +136,7 @@ public class SystemPropertiesWriter extends HtmlDocletWriter {
     protected void addSystemProperties(Content content) {
         Map<String, List<IndexItem>> searchIndexMap = groupSystemProperties();
         Content separator = new StringContent(", ");
-        Table table = new Table(HtmlStyle.systemPropertiesSummary, HtmlStyle.summaryTable)
+        Table table = new Table(HtmlStyle.summaryTable)
                 .setCaption(contents.systemPropertiesSummaryLabel)
                 .setHeader(new TableHeader(contents.propertyLabel, contents.referencedIn))
                 .setColumnStyles(HtmlStyle.colFirst, HtmlStyle.colLast);

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlStyle.java

@@ -264,67 +264,18 @@ public enum HtmlStyle {
      */
     propertySummary,
 
-    /**
-     * The class for the {@code section} element containing a summary of
-     * the services provided by a module.
-     */
-    providesSummary,
-
-    /**
-     * The class for the {@code section} element containing a summary of
-     * the modules required by a module.
-     */
-    requiresSummary,
-
     /**
      * The class for the {@code section} element containing a summary of
      * the services provided or used by a module.
      */
     servicesSummary,
 
-    /**
-     * The class for the {@code section} element containing a summary of
-     * the services used by a module.
-     */
-    usesSummary,
-
     /**
      * The class for a {@code section} element on the "Constants Field Values" page,
      * <i>and</i>
      * the class for the {@code section} element for the enum constants of an enum class.
      */
     constantsSummary,
-
-    /**
-     * The class for a {@code section} element on the "Deprecated"
-     * page.
-     */
-    deprecatedSummary,
-
-    /**
-     * The class for the {@code section} element on the top-level page
-     * summarizing all the modules or packages that are documented.
-     */
-    overviewSummary,
-
-    /**
-     * The class for a {@code section} element on the "System Properties" page.
-     */
-    systemPropertiesSummary,
-
-    /**
-     * The class for the list of packages on the "All Packages" index page,
-     * <i>and</i>
-     * the class for the {@code section} element summarizing the types
-     * in a package.
-     */
-    typeSummary,
-
-    /**
-     * The class for {@code section} elements containing information
-     * about where a package, type or member is used within the API.
-     */
-    useSummary,
     //</editor-fold>
 
     //<editor-fold desc="details">
@@ -408,12 +359,30 @@ public enum HtmlStyle {
     // A module page has details tables containing the details of the directives.
 
     /**
-     * The class of a {@code table} element used to present details of a program element.
+     * The class of a {@code div} element whose content should be rendered as a table
+     * with two columns.
+     */
+    twoColumnSummary,
+
+    /**
+     * The class of a {@code div} element whose content should be rendered as a table
+     * with three columns.
+     */
+    threeColumnSummary,
+
+    /**
+     * The class of a {@code div} element whose content should be rendered as a table
+     * with four columns.
+     */
+    fourColumnSummary,
+
+    /**
+     * The class of a {@code div} element used to present details of a program element.
      */
     detailsTable,
 
     /**
-     * The class of a {@code table} element used to present a summary of the enclosed
+     * The class of a {@code div} element used to present a summary of the enclosed
      * elements of a program element.  A {@code summaryTable} typically references
      * items in a corresponding {@link #detailsList}.
      */
@@ -425,6 +394,17 @@ public enum HtmlStyle {
      */
     activeTableTab,
 
+    /**
+     * The class for the caption of a table. The caption is displayed as a single
+     * inactive tab above the table.
+     */
+    caption,
+
+    /**
+     * The class of an element that is part of a table header.
+     */
+    tableHeader,
+
     /**
      * The class of a "tab" that indicates an alternate view of the contents of a table.
      * This is used when the table provides filtered views.
@@ -472,21 +452,21 @@ public enum HtmlStyle {
 
     /**
      * A class used to provide the background for the rows of a table,
-     * to provide a "striped" effect. This class and {@link #rowColor}
+     * to provide a "striped" effect. This class and {@link #oddRowColor}
      * are used on alternating rows.
      * The classes are applied dynamically when table "tabs" are used
      * to filter the set of rows to be displayed
      */
-    altColor,
+    evenRowColor,
 
     /**
      * A class used to provide the background for the rows of a table,
-     * to provide a "striped" effect. This class and {@link #altColor}
+     * to provide a "striped" effect. This class and {@link #evenRowColor}
      * are used on alternating rows.
      * The classes are applied dynamically when table "tabs" are used
      * to filter the set of rows to be displayed
      */
-    rowColor,
+    oddRowColor,
     //</editor-fold>
 
     //<editor-fold desc="documentation comments">

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/HtmlTree.java

@@ -154,6 +154,18 @@ public class HtmlTree extends Content {
         return put(HtmlAttr.CLASS, style.cssName());
     }
 
+    public HtmlTree addStyle(HtmlStyle style) {
+        return addStyle(style.cssName());
+    }
+
+    public HtmlTree addStyle(String style) {
+        if (attrs.isEmpty())
+            attrs = new LinkedHashMap<>(3);
+        attrs.compute(HtmlAttr.CLASS, (attr, existingStyle) ->
+                existingStyle == null ? style : existingStyle + " " + style);
+        return this;
+    }
+
     /**
      * Adds additional content for the HTML element.
      *

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/Table.java

@@ -34,8 +34,7 @@ import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
-import java.util.function.Function;
-import java.util.function.IntFunction;
+import java.util.function.BiFunction;
 import java.util.function.Predicate;
 
 import javax.lang.model.element.Element;
@@ -43,7 +42,12 @@ import javax.lang.model.element.Element;
 import jdk.javadoc.internal.doclets.toolkit.Content;
 
 /**
- * An HTML table, such as the summary tables for various kinds of element.
+ * An HTML container used to display summary tables for various kinds of elements.
+ * This class historically used to generate an HTML {@code <table>} element but has been
+ * updated to render elements as a stream of {@code <div>} elements that rely on
+ * <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> for styling.
+ * This provides for more flexible layout options, such as splitting up table rows on
+ * small displays.
  *
  * <p>The table should be used in three phases:
  * <ol>
@@ -56,19 +60,15 @@ import jdk.javadoc.internal.doclets.toolkit.Content;
  *
  * A table may support filtered views, which can be selected by clicking on
  * one of a list of tabs above the table. If the table does not support filtered
- * views, the {@code <caption>} element is typically displayed as a single (inactive)
+ * views, the caption element is typically displayed as a single (inactive)
  * tab.
  *
- * Tables are always enclosed in a {@code <div>} element, which will also contain
- * a {@code <div>} element for the list of tabs, when the table supports filtered views.
- *
  *  <p><b>This is NOT part of any supported API.
  *  If you write code that depends on this, you do so at your own risk.
  *  This code and its internal interfaces are subject to change or
  *  deletion without notice.</b>
  */
 public class Table extends Content {
-    private final HtmlStyle topStyle;
     private final HtmlStyle tableStyle;
     private Content caption;
     private Map<String, Predicate<Element>> tabMap;
@@ -77,36 +77,27 @@ public class Table extends Content {
     private HtmlStyle tabListStyle = HtmlStyle.tableTabs;
     private HtmlStyle activeTabStyle = HtmlStyle.activeTableTab;
     private HtmlStyle tabStyle = HtmlStyle.tableTab;
-    private IntFunction<String> tabScript;
-    private Function<Integer, String> tabId = (i -> "t" + i);
+    private BiFunction<String, Integer, String> tabId = (tableId, tabIndex) -> tableId + "-tab" + tabIndex;
     private TableHeader header;
     private List<HtmlStyle> columnStyles;
-    private int rowScopeColumnIndex;
-    private List<HtmlStyle> stripedStyles = Arrays.asList(HtmlStyle.altColor, HtmlStyle.rowColor);
+    private List<HtmlStyle> stripedStyles = Arrays.asList(HtmlStyle.evenRowColor, HtmlStyle.oddRowColor);
     private final List<Content> bodyRows;
-    private final List<Integer> bodyRowMasks;
-    private String rowIdPrefix = "i";
     private String id;
 
     /**
-     * Creates a builder for an HTML table.
+     * Creates a builder for an HTML element representing a table.
      *
-     * @param topStyle       the style class for the top-level {@code <div>} element
-     * @param tableStyle     the style class for the {@code <table>} element
+     * @param tableStyle the style class for the top-level {@code <div>} element
      */
-    public Table(HtmlStyle topStyle, HtmlStyle tableStyle) {
-        this.topStyle = topStyle;
+    public Table(HtmlStyle tableStyle) {
         this.tableStyle = tableStyle;
         bodyRows = new ArrayList<>();
-        bodyRowMasks = new ArrayList<>();
     }
 
     /**
      * Sets the caption for the table.
      * This is ignored if the table is configured to provide tabs to select
      * different subsets of rows within the table.
-     * The caption should be suitable for use as the content of a {@code <caption>}
-     * element.
      *
      * @param captionContent the caption
      * @return this object
@@ -147,19 +138,6 @@ public class Table extends Content {
         return this;
     }
 
-    /**
-     * Sets the function used to generate the JavaScript to be used when a tab is selected.
-     * When the function is invoked, the argument will be an integer value containing
-     * the bit mask identifying the rows to be selected.
-     *
-     * @param f the function
-     * @return this object
-     */
-    public Table setTabScript(IntFunction<String> f) {
-        tabScript = f;
-        return this;
-    }
-
     /**
      * Sets the name of the styles used to display the tabs.
      *
@@ -175,19 +153,6 @@ public class Table extends Content {
         return this;
     }
 
-    /**
-     * Sets the JavaScript function used to generate the {@code id} attribute for each tag.
-     * The default is to use <code>t</code><i>N</i> where <i>N</i> is the index of the tab,
-     * counting from 0 (for the default tab), and then from 1 upwards for additional tabs.
-     *
-     * @param f the function
-     * @return this object
-     */
-    public Table setTabId(Function<Integer,String> f) {
-        tabId = f;
-        return this;
-    }
-
     /**
      * Sets the header for the table.
      *
@@ -206,7 +171,7 @@ public class Table extends Content {
 
     /**
      * Sets the styles used for {@code <tr>} tags, to give a "striped" appearance.
-     * The defaults are currently {@code rowColor} and {@code altColor}.
+     * The defaults are currently {@code evenRowColor} and {@code oddRowColor}.
      *
      * @param evenRowStyle  the style to use for even-numbered rows
      * @param oddRowStyle   the style to use for odd-numbered rows
@@ -217,18 +182,6 @@ public class Table extends Content {
         return this;
     }
 
-    /**
-     * Sets the column used to indicate which cell in a row should be declared
-     * as a header cell with the {@code scope} attribute set to {@code row}.
-     *
-     * @param columnIndex the column index
-     * @return this object
-     */
-    public Table setRowScopeColumn(int columnIndex) {
-        rowScopeColumnIndex = columnIndex;
-        return this;
-    }
-
     /**
      * Sets the styles for be used for the cells in each row.
      *
@@ -260,25 +213,6 @@ public class Table extends Content {
         return this;
     }
 
-    /**
-     * Sets the prefix used for the {@code id} attribute for each row in the table.
-     * The default is "i".
-     *
-     * <p>Note:
-     * <ul>
-     * <li>The prefix should probably be a value such that the generated ids cannot
-     *      clash with any other id, such as those that might be created for fields within
-     *      a class.
-     * </ul>
-     *
-     * @param prefix the prefix
-     * @return  this object
-     */
-    public Table setRowIdPrefix(String prefix) {
-        rowIdPrefix = prefix;
-        return this;
-    }
-
     /**
      * Sets the id attribute of the table.
      * This is required if the table has tabs, in which case a subsidiary id
@@ -358,41 +292,43 @@ public class Table extends Content {
             throw new NullPointerException();
         }
 
-        HtmlTree row = new HtmlTree(TagName.TR);
+        Content row = new ContentBuilder();
 
+        HtmlStyle rowStyle = null;
         if (stripedStyles != null) {
             int rowIndex = bodyRows.size();
-            row.setStyle(stripedStyles.get(rowIndex % 2));
+            rowStyle = stripedStyles.get(rowIndex % 2);
+        }
+        Set<String> tabClasses = new HashSet<>();
+        if (tabMap != null) {
+            tabClasses.add(id);
+            int tabIndex = 1;
+            for (Map.Entry<String, Predicate<Element>> e : tabMap.entrySet()) {
+                String name = e.getKey();
+                Predicate<Element> predicate = e.getValue();
+                if (predicate.test(element)) {
+                    tabs.add(name);
+                    tabClasses.add(tabId.apply(id, tabIndex));
+                }
+                tabIndex++;
+            }
         }
         int colIndex = 0;
         for (Content c : contents) {
             HtmlStyle cellStyle = (columnStyles == null || colIndex > columnStyles.size())
                     ? null
                     : columnStyles.get(colIndex);
-            HtmlTree cell = (colIndex == rowScopeColumnIndex)
-                    ? HtmlTree.TH(cellStyle, "row", c)
-                    : HtmlTree.TD(cellStyle, c);
+            HtmlTree cell = HtmlTree.DIV(cellStyle, c);
+            if (rowStyle != null) {
+                cell.addStyle(rowStyle);
+            }
+            for (String tabClass : tabClasses) {
+                cell.addStyle(tabClass);
+            }
             row.add(cell);
             colIndex++;
         }
         bodyRows.add(row);
-
-        if (tabMap != null) {
-            int index = bodyRows.size() - 1;
-            row.put(HtmlAttr.ID, (rowIdPrefix + index));
-            int mask = 0;
-            int maskBit = 1;
-            for (Map.Entry<String, Predicate<Element>> e : tabMap.entrySet()) {
-                String name = e.getKey();
-                Predicate<Element> predicate = e.getValue();
-                if (predicate.test(element)) {
-                    tabs.add(name);
-                    mask |= maskBit;
-                }
-                maskBit = (maskBit << 1);
-            }
-            bodyRowMasks.add(mask);
-        }
     }
 
     /**
@@ -416,34 +352,41 @@ public class Table extends Content {
      * @return the HTML
      */
     private Content toContent() {
-        HtmlTree mainDiv = new HtmlTree(TagName.DIV).setStyle(topStyle);
+        Content main;
         if (id != null) {
-            mainDiv.setId(id);
+            main = new HtmlTree(TagName.DIV).setId(id);
+        } else {
+            main = new ContentBuilder();
         }
-        HtmlTree table = new HtmlTree(TagName.TABLE).setStyle(tableStyle);
+        HtmlStyle columnStyle = switch (columnStyles.size()) {
+            case 2 -> HtmlStyle.twoColumnSummary;
+            case 3 -> HtmlStyle.threeColumnSummary;
+            case 4 -> HtmlStyle.fourColumnSummary;
+            default -> throw new IllegalStateException();
+        };
+
+        HtmlTree table = new HtmlTree(TagName.DIV).setStyle(tableStyle).addStyle(columnStyle);
         if (tabMap == null || tabs.size() == 1) {
             if (tabMap == null) {
-                table.add(caption);
-            } else if (tabs.size() == 1) {
+                main.add(caption);
+            } else {
                 String tabName = tabs.iterator().next();
-                table.add(getCaption(new StringContent(tabName)));
+                main.add(getCaption(new StringContent(tabName)));
             }
             table.add(getTableBody());
-            mainDiv.add(table);
+            main.add(table);
         } else {
             HtmlTree tablist = new HtmlTree(TagName.DIV).setStyle(tabListStyle)
                     .put(HtmlAttr.ROLE, "tablist")
                     .put(HtmlAttr.ARIA_ORIENTATION, "horizontal");
 
             int tabIndex = 0;
-            tablist.add(createTab(tabId.apply(tabIndex), activeTabStyle, true, defaultTab));
-            table.put(HtmlAttr.ARIA_LABELLEDBY, tabId.apply(tabIndex));
+            tablist.add(createTab(tabId.apply(id, tabIndex), activeTabStyle, true, defaultTab));
+            table.put(HtmlAttr.ARIA_LABELLEDBY, tabId.apply(id, tabIndex));
             for (String tabName : tabMap.keySet()) {
                 tabIndex++;
                 if (tabs.contains(tabName)) {
-                    String script = tabScript.apply(1 << (tabIndex - 1));
-                    HtmlTree tab = createTab(tabId.apply(tabIndex), tabStyle, false, tabName);
-                    tab.put(HtmlAttr.ONCLICK, script);
+                    HtmlTree tab = createTab(tabId.apply(id, tabIndex), tabStyle, false, tabName);
                     tablist.add(tab);
                 }
             }
@@ -455,20 +398,22 @@ public class Table extends Content {
                     .put(HtmlAttr.ROLE, "tabpanel");
             table.add(getTableBody());
             tabpanel.add(table);
-            mainDiv.add(tablist);
-            mainDiv.add(tabpanel);
+            main.add(tablist);
+            main.add(tabpanel);
         }
-        return mainDiv;
+        return main;
     }
 
     private HtmlTree createTab(String tabId, HtmlStyle style, boolean defaultTab, String tabName) {
         HtmlTree tab = new HtmlTree(TagName.BUTTON)
+                .put(HtmlAttr.ID, tabId)
                 .put(HtmlAttr.ROLE, "tab")
                 .put(HtmlAttr.ARIA_SELECTED, defaultTab ? "true" : "false")
                 .put(HtmlAttr.ARIA_CONTROLS, id + ".tabpanel")
                 .put(HtmlAttr.TABINDEX, defaultTab ? "0" : "-1")
                 .put(HtmlAttr.ONKEYDOWN, "switchTab(event)")
-                .put(HtmlAttr.ID, tabId)
+                .put(HtmlAttr.ONCLICK, "show('" + id + "', '" + (defaultTab ? id : tabId)
+                        + "', " + columnStyles.size() + ")")
                 .setStyle(style);
         tab.add(tabName);
         return tab;
@@ -476,12 +421,8 @@ public class Table extends Content {
 
     private Content getTableBody() {
         ContentBuilder tableContent = new ContentBuilder();
-        Content thead = new HtmlTree(TagName.THEAD);
-        thead.add(header);
-        tableContent.add(thead);
-        Content tbody = new HtmlTree(TagName.TBODY);
-        bodyRows.forEach(tbody::add);
-        tableContent.add(tbody);
+        tableContent.add(header);
+        bodyRows.forEach(tableContent::add);
         return tableContent;
     }
 
@@ -506,48 +447,12 @@ public class Table extends Content {
 
         StringBuilder sb = new StringBuilder();
 
-        // Add the variable defining the bitmask for each row
-        sb.append("var data").append(" = {");
-        int rowIndex = 0;
-        for (int mask : bodyRowMasks) {
-            if (rowIndex > 0) {
-                sb.append(",");
-            }
-            sb.append("\"").append(rowIdPrefix).append(rowIndex).append("\":").append(mask);
-            rowIndex++;
-        }
-        sb.append("};\n");
-
-        // Add the variable defining the tabs
-        sb.append("var tabs = {");
-        appendTabInfo(sb, 65535, tabId.apply(0), defaultTab);
-        int tabIndex = 1;
-        int maskBit = 1;
-        for (String tabName: tabMap.keySet()) {
-            if (tabs.contains(tabName)) {
-                sb.append(",");
-                appendTabInfo(sb, maskBit, tabId.apply(tabIndex), tabName);
-            }
-            tabIndex++;
-            maskBit = (maskBit << 1);
-        }
-        sb.append("};\n");
-
         // Add the variables defining the stylenames
         appendStyleInfo(sb,
                 stripedStyles.get(0), stripedStyles.get(1), tabStyle, activeTabStyle);
         return sb.toString();
     }
 
-    private void appendTabInfo(StringBuilder sb, int value, String id, String name) {
-        sb.append(value)
-                .append(":[")
-                .append(Script.stringLiteral(id))
-                .append(",")
-                .append(Script.stringLiteral(name))
-                .append("]");
-    }
-
     private void appendStyleInfo(StringBuilder sb, HtmlStyle... styles) {
         for (HtmlStyle style : styles) {
             sb.append("var ").append(style.name()).append(" = \"").append(style.cssName()).append("\";\n");
@@ -556,7 +461,8 @@ public class Table extends Content {
     }
 
     private HtmlTree getCaption(Content title) {
-        return new HtmlTree(TagName.CAPTION)
+        return new HtmlTree(TagName.DIV)
+                .setStyle(HtmlStyle.caption)
                 .add(HtmlTree.SPAN(title));
     }
 }

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/TableHeader.java

@@ -136,20 +136,21 @@ public class TableHeader extends Content {
      * @return a Content object
      */
     private Content toContent() {
-        String scope = "col";
-        Content tr = new HtmlTree(TagName.TR);
+        Content header = new ContentBuilder();
         int i = 0;
         for (Content cellContent : cellContents) {
             HtmlStyle style = (styles != null) ? styles.get(i)
                     : (i == 0) ? HtmlStyle.colFirst
                     : (i == (cellContents.size() - 1)) ? HtmlStyle.colLast
                     : (i == 1) ? HtmlStyle.colSecond : null;
-            Content cell = (style == null) ? HtmlTree.TH(scope, cellContent)
-                    : HtmlTree.TH(style, scope, cellContent);
-            tr.add(cell);
+            HtmlTree cell = HtmlTree.DIV(HtmlStyle.tableHeader, cellContent);
+            if (style != null) {
+                cell.addStyle(style);
+            }
+            header.add(cell);
             i++;
         }
-        return tr;
+        return header;
     }
 
 }

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/script.js

@@ -45,50 +45,54 @@ function createElem(doc, tag, path) {
     scriptElement.parentNode.insertBefore(script, scriptElement);
 }
 
-function show(type) {
-    count = 0;
-    for (var key in data) {
-        var row = document.getElementById(key);
-        if ((data[key] &  type) !== 0) {
-            row.style.display = '';
-            row.className = (count++ % 2) ? rowColor : altColor;
-        }
-        else
-            row.style.display = 'none';
+function show(tableId, selected, columns) {
+    if (tableId !== selected) {
+        document.querySelectorAll('div.' + tableId + ':not(.' + selected + ')')
+            .forEach(function(elem) {
+                elem.style.display = 'none';
+            });
     }
-    updateTabs(type);
+    document.querySelectorAll('div.' + selected)
+        .forEach(function(elem, index) {
+            elem.style.display = '';
+            var isEvenRow = index % (columns * 2) < columns;
+            elem.classList.remove(isEvenRow ? oddRowColor : evenRowColor);
+            elem.classList.add(isEvenRow ? evenRowColor : oddRowColor);
+        });
+    updateTabs(tableId, selected);
 }
 
-function updateTabs(type) {
-    var firstRow = document.getElementById(Object.keys(data)[0]);
-    var table = firstRow.closest('table');
-    for (var value in tabs) {
-        var tab = document.getElementById(tabs[value][0]);
-        if (value == type) {
-            tab.className = activeTableTab;
-            tab.innerHTML = tabs[value][1];
-            tab.setAttribute('aria-selected', true);
-            tab.setAttribute('tabindex',0);
-            table.setAttribute('aria-labelledby', tabs[value][0]);
-        }
-        else {
-            tab.className = tableTab;
-            tab.setAttribute('aria-selected', false);
-            tab.setAttribute('tabindex',-1);
-            tab.setAttribute('onclick', "show("+ value + ")");
-            tab.innerHTML = tabs[value][1];
-        }
-    }
+function updateTabs(tableId, selected) {
+    document.querySelector('div#' + tableId +' .summary-table')
+        .setAttribute('aria-labelledby', selected);
+    document.querySelectorAll('button[id^="' + tableId + '"]')
+        .forEach(function(tab, index) {
+            if (selected === tab.id || (tableId === selected && index === 0)) {
+                tab.className = activeTableTab;
+                tab.setAttribute('aria-selected', true);
+                tab.setAttribute('tabindex',0);
+            } else {
+                tab.className = tableTab;
+                tab.setAttribute('aria-selected', false);
+                tab.setAttribute('tabindex',-1);
+            }
+        });
 }
 
 function switchTab(e) {
-    if (e.keyCode == 37 || e.keyCode == 38) {
-        $("[aria-selected=true]").prev().click().focus();
-        e.preventDefault();
-    }
-    if (e.keyCode == 39 || e.keyCode == 40) {
-        $("[aria-selected=true]").next().click().focus();
-        e.preventDefault();
+    var selected = document.querySelector('[aria-selected=true]');
+    if (selected) {
+        if ((e.keyCode === 37 || e.keyCode === 38) && selected.previousSibling) {
+            // left or up arrow key pressed: move focus to previous tab
+            selected.previousSibling.click();
+            selected.previousSibling.focus();
+            e.preventDefault();
+        } else if ((e.keyCode === 39 || e.keyCode === 40) && selected.nextSibling) {
+            // right or down arrow key pressed: move focus to next tab
+            selected.nextSibling.click();
+            selected.nextSibling.focus();
+            e.preventDefault();
+        }
     }
 }
 

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css

@@ -77,7 +77,7 @@ dt code {
     font-size:14px;
     padding-top:4px;
 }
-table tr td dt code {
+.summary-table dt code {
     font-family:'DejaVu Sans Mono', monospace;
     font-size:14px;
     vertical-align:top;
@@ -289,7 +289,7 @@ dl.notes > dt {
     color:#4E4E4E;
 }
 dl.notes > dd {
-    margin:5px 0 10px 0px;
+    margin:5px 0 10px 0;
     font-size:14px;
     font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif;
 }
@@ -336,29 +336,24 @@ ul.summary-list > li {
     margin-bottom:15px;
     line-height:1.4;
 }
-table tr td dl, table tr td dl dt, table tr td dl dd {
+.summary-table dl, .summary-table dl dt, .summary-table dl dd {
     margin-top:0;
     margin-bottom:1px;
 }
 /*
  * Styles for tables.
  */
-.overview-summary table, .member-summary table, .type-summary table, .use-summary table, .constants-summary table, .deprecated-summary table,
-.requires-summary table, .packages-summary table, .provides-summary table, .uses-summary table, .system-properties-summary table {
+.summary-table {
     width:100%;
     border-spacing:0;
     border-left:1px solid #EEE;
     border-right:1px solid #EEE;
     border-bottom:1px solid #EEE;
 }
-.overview-summary table, .member-summary table, .requires-summary table, .packages-summary table,
-.provides-summary table, .uses-summary table, .system-properties-summary table {
-    padding:0px;
+.summary-table {
+    padding:0;
 }
-.overview-summary caption, .member-summary caption, .type-summary caption,
-.use-summary caption, .constants-summary caption, .deprecated-summary caption,
-.requires-summary caption, .packages-summary caption, .provides-summary caption,
-.uses-summary caption, .system-properties-summary caption {
+.caption {
     position:relative;
     text-align:left;
     background-repeat:no-repeat;
@@ -372,32 +367,14 @@ table tr td dl, table tr td dl dt, table tr td dl dd {
     margin:0px;
     white-space:pre;
 }
-.constants-summary caption a:link, .constants-summary caption a:visited,
-.use-summary caption a:link, .use-summary caption a:visited {
+.caption a:link, .caption a:visited {
     color:#1f389c;
 }
-.overview-summary caption a:link, .member-summary caption a:link, .type-summary caption a:link,
-.deprecated-summary caption a:link,
-.requires-summary caption a:link, .packages-summary caption a:link, .provides-summary caption a:link,
-.uses-summary caption a:link,
-.overview-summary caption a:hover, .member-summary caption a:hover, .type-summary caption a:hover,
-.use-summary caption a:hover, .constants-summary caption a:hover, .deprecated-summary caption a:hover,
-.requires-summary caption a:hover, .packages-summary caption a:hover, .provides-summary caption a:hover,
-.uses-summary caption a:hover,
-.overview-summary caption a:active, .member-summary caption a:active, .type-summary caption a:active,
-.use-summary caption a:active, .constants-summary caption a:active, .deprecated-summary caption a:active,
-.requires-summary caption a:active, .packages-summary caption a:active, .provides-summary caption a:active,
-.uses-summary caption a:active,
-.overview-summary caption a:visited, .member-summary caption a:visited, .type-summary caption a:visited,
-.deprecated-summary caption a:visited,
-.requires-summary caption a:visited, .packages-summary caption a:visited, .provides-summary caption a:visited,
-.uses-summary caption a:visited {
+.caption a:hover,
+.caption a:active {
     color:#FFFFFF;
 }
-.overview-summary caption span, .member-summary caption span, .type-summary caption span,
-.use-summary caption span, .constants-summary caption span, .deprecated-summary caption span,
-.requires-summary caption span, .packages-summary caption span, .provides-summary caption span,
-.uses-summary caption span, .system-properties-summary caption span {
+.caption span {
     white-space:nowrap;
     padding-top:5px;
     padding-left:12px;
@@ -425,77 +402,84 @@ div.table-tabs > button.table-tab {
    background: #4D7A97;
    color: #FFFFFF;
 }
-
-.row-color th,
-.alt-color th {
-    font-weight:normal;
+.two-column-summary {
+    display: grid;
+    grid-template-columns: minmax(15%, max-content) minmax(15%, auto);
 }
-.overview-summary td, .member-summary td, .type-summary td,
-.use-summary td, .constants-summary td, .deprecated-summary td,
-.requires-summary td, .packages-summary td, .provides-summary td,
-.uses-summary td, .system-properties-summary td {
+.three-column-summary {
+    display: grid;
+    grid-template-columns: minmax(10%, max-content) minmax(15%, max-content) minmax(15%, auto);
+}
+.four-column-summary {
+    display: grid;
+    grid-template-columns: minmax(10%, max-content) minmax(10%, max-content) minmax(10%, max-content) minmax(10%, auto);
+}
+@media screen and (max-width: 600px) {
+    .two-column-summary {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+}
+@media screen and (max-width: 800px) {
+    .three-column-summary {
+        display: grid;
+        grid-template-columns: minmax(10%, max-content) minmax(25%, auto);
+    }
+    .three-column-summary .col-last {
+        grid-column-end: span 2;
+    }
+}
+@media screen and (max-width: 1000px) {
+    .four-column-summary {
+        display: grid;
+        grid-template-columns: minmax(15%, max-content) minmax(15%, auto);
+    }
+}
+.summary-table > div {
     text-align:left;
-    padding:0px 0px 12px 10px;
+    padding: 8px 3px 3px 7px;
 }
-th.col-first, th.col-second, th.col-last, th.col-constructor-name, th.col-deprecated-item-name, .use-summary th,
-.constants-summary th, .packages-summary th, td.col-first, td.col-second, td.col-last, .use-summary td,
-.constants-summary td, .system-properties-summary th {
+.col-first, .col-second, .col-last, .col-constructor-name, .col-deprecated-item-name {
     vertical-align:top;
-    padding-right:0px;
+    padding-right:0;
     padding-top:8px;
     padding-bottom:3px;
 }
-th.col-first, th.col-second, th.col-last, th.col-constructor-name, th.col-deprecated-item-name, .constants-summary th,
-.packages-summary th {
+.table-header {
     background:#dee3e9;
-    text-align:left;
-    padding:8px 3px 3px 7px;
+    font-weight: bold;
 }
-td.col-first, th.col-first {
+.col-first, .col-first {
     font-size:13px;
 }
-td.col-second, th.col-second, td.col-last, th.col-constructor-name, th.col-deprecated-item-name, th.col-last {
+.col-second, .col-second, .col-last, .col-constructor-name, .col-deprecated-item-name, .col-last {
     font-size:13px;
 }
-.constants-summary th, .packages-summary th {
-    font-size:13px;
-}
-.provides-summary th.col-first, .provides-summary th.col-last, .provides-summary td.col-first,
-.provides-summary td.col-last {
-    white-space:normal;
-    font-size:13px;
-}
-.overview-summary td.col-first, .overview-summary th.col-first,
-.requires-summary td.col-first, .requires-summary th.col-first,
-.packages-summary td.col-first, .packages-summary td.col-second, .packages-summary th.col-first, .packages-summary th,
-.uses-summary td.col-first, .uses-summary th.col-first,
-.provides-summary td.col-first, .provides-summary th.col-first,
-.member-summary td.col-first, .member-summary th.col-first,
-.member-summary td.col-second, .member-summary th.col-second, .member-summary th.col-constructor-name,
-.type-summary td.col-first, .type-summary th.col-first {
+.col-first, .col-second, .col-constructor-name {
     vertical-align:top;
+    overflow: auto;
 }
-.packages-summary th.col-last, .packages-summary td.col-last {
+.col-last {
     white-space:normal;
 }
-td.col-first a:link, td.col-first a:visited,
-td.col-second a:link, td.col-second a:visited,
-th.col-first a:link, th.col-first a:visited,
-th.col-second a:link, th.col-second a:visited,
-th.col-constructor-name a:link, th.col-constructor-name a:visited,
-th.col-deprecated-item-name a:link, th.col-deprecated-item-name a:visited,
-.constant-values-container td a:link, .constant-values-container td a:visited,
-.all-classes-container td a:link, .all-classes-container td a:visited,
-.all-packages-container td a:link, .all-packages-container td a:visited {
+.col-first a:link, .col-first a:visited,
+.col-second a:link, .col-second a:visited,
+.col-first a:link, .col-first a:visited,
+.col-second a:link, .col-second a:visited,
+.col-constructor-name a:link, .col-constructor-name a:visited,
+.col-deprecated-item-name a:link, .col-deprecated-item-name a:visited,
+.constant-values-container a:link, .constant-values-container a:visited,
+.all-classes-container a:link, .all-classes-container a:visited,
+.all-packages-container a:link, .all-packages-container a:visited {
     font-weight:bold;
 }
 .table-sub-heading-color {
     background-color:#EEEEFF;
 }
-.alt-color, .alt-color th {
+.even-row-color, .even-row-color .table-header {
     background-color:#FFFFFF;
 }
-.row-color, .row-color th {
+.odd-row-color, .odd-row-color .table-header {
     background-color:#EEEEEF;
 }
 /*
@@ -512,10 +496,10 @@ div.block {
     font-size:14px;
     font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif;
 }
-td.col-last div {
-    padding-top:0px;
+.col-last div {
+    padding-top:0;
 }
-td.col-last a {
+.col-last a {
     padding-bottom:3px;
 }
 div.member-signature {

test/langtools/jdk/javadoc/doclet/ValidHtml/ValidHtml.java

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2002, 2019, Oracle and/or its affiliates. All rights reserved.
+ * Copyright (c) 2002, 2020, Oracle and/or its affiliates. All rights reserved.
  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  *
  * This code is free software; you can redistribute it and/or modify it
@@ -54,10 +54,6 @@ public class ValidHtml extends JavadocTester {
                     "-sourcepath", testSrc,
                     "p1", "p2");
         checkExit(Exit.OK);
-        // Test the table elements are in the correct order:
-        checkOutput("p1/package-use.html", true,
-                "</td>\n"
-                + "</tr>");
         String HTML5 = "<!DOCTYPE HTML>";
         checkValidHTML(HTML5);
     }

test/langtools/jdk/javadoc/doclet/constantValues/TestConstantValuesDriver.java

@@ -55,34 +55,34 @@ public class TestConstantValuesDriver extends JavadocTester {
                 """
                     <code>"&lt;Hello World&gt;"</code>""",
                 """
-                    <code id="TestConstantValues.BYTE_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;byte</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#BYTE_MAX_VALUE">BYTE_MAX_VALUE</a></code></th>
-                    <td class="col-last"><code>0x7f</code></td>""",
+                    <code id="TestConstantValues.BYTE_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;byte</code></div>
+                    <div class="col-second even-row-color"><code><a href="TestConstantValues.html#BYTE_MAX_VALUE">BYTE_MAX_VALUE</a></code></div>
+                    <div class="col-last even-row-color"><code>0x7f</code></div>""",
                 """
-                    <code id="TestConstantValues.BYTE_MIN_VALUE">public&nbsp;static&nbsp;final&nbsp;byte</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#BYTE_MIN_VALUE">BYTE_MIN_VALUE</a></code></th>
-                    <td class="col-last"><code>0x81</code></td>""",
+                    <code id="TestConstantValues.BYTE_MIN_VALUE">public&nbsp;static&nbsp;final&nbsp;byte</code></div>
+                    <div class="col-second odd-row-color"><code><a href="TestConstantValues.html#BYTE_MIN_VALUE">BYTE_MIN_VALUE</a></code></div>
+                    <div class="col-last odd-row-color"><code>0x81</code></div>""",
                 """
-                    <code id="TestConstantValues.CHAR_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;char</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#CHAR_MAX_VALUE">CHAR_MAX_VALUE</a></code></th>
-                    <td class="col-last"><code>'\\uffff'</code></td>""",
+                    <code id="TestConstantValues.CHAR_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;char</code></div>
+                    <div class="col-second even-row-color"><code><a href="TestConstantValues.html#CHAR_MAX_VALUE">CHAR_MAX_VALUE</a></code></div>
+                    <div class="col-last even-row-color"><code>'\\uffff'</code></div>""",
                 """
-                    <code id="TestConstantValues.DOUBLE_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;double</code></td>""",
-                    """
-                        <th class="col-second" scope="row"><code><a href="TestConstantValues.html#DOUBLE\
-                        _MAX_VALUE">DOUBLE_MAX_VALUE</a></code></th>
-                        <td class="col-last"><code>1.7976931348623157E308</code></td>""",
+                    <code id="TestConstantValues.DOUBLE_MAX_VALUE">public&nbsp;static&nbsp;final&nbsp;double</code></div>""",
                 """
-                    <code id="TestConstantValues.DOUBLE_MIN_VALUE">public&nbsp;static&nbsp;final&nbsp;double</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#DOUBLE\
-                    _MIN_VALUE">DOUBLE_MIN_VALUE</a></code></th>""",
+                    <div class="col-second odd-row-color"><code><a href="TestConstantValues.html#DOUBLE_MAX_VALUE">\
+                    DOUBLE_MAX_VALUE</a></code></div>
+                    <div class="col-last odd-row-color"><code>1.7976931348623157E308</code></div>""",
                 """
-                    <code id="TestConstantValues.GOODBYE">public&nbsp;static&nbsp;final&nbsp;boolean</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#GOODBYE">GOODBYE</a></code></th>""",
+                    <code id="TestConstantValues.DOUBLE_MIN_VALUE">public&nbsp;static&nbsp;final&nbsp;double</code></div>
+                    <div class="col-second even-row-color"><code><a href="TestConstantValues.html#DOUBLE_MIN_VALUE">\
+                    DOUBLE_MIN_VALUE</a></code></div>""",
                 """
-                    <code id="TestConstantValues.HELLO">public&nbsp;static&nbsp;final&nbsp;boolean</code></td>
-                    <th class="col-second" scope="row"><code><a href="TestConstantValues.html#HELLO">HELLO</a></code></th>
-                    <td class="col-last"><code>true</code></td>"""
+                    <code id="TestConstantValues.GOODBYE">public&nbsp;static&nbsp;final&nbsp;boolean</code></div>
+                    <div class="col-second odd-row-color"><code><a href="TestConstantValues.html#GOODBYE">GOODBYE</a></code></div>""",
+                """
+                    <code id="TestConstantValues.HELLO">public&nbsp;static&nbsp;final&nbsp;boolean</code></div>
+                    <div class="col-second even-row-color"><code><a href="TestConstantValues.html#HELLO">HELLO</a></code></div>
+                    <div class="col-last even-row-color"><code>true</code></div>"""
         );
     }
 }

test/langtools/jdk/javadoc/doclet/testAbstractMethod/TestAbstractMethod.java

@@ -50,64 +50,83 @@ public class TestAbstractMethod extends JavadocTester {
 
         checkOutput("pkg/A.html", true,
                 """
-                    <td class="col-first"><code>default void</code></td>""",
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab5 method-summary-table"><code>default void</code></div>""",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t3" class="table-tab" onclick="show(4);">Abstract Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t5" class="table\
-                    -tab" onclick="show(16);">Default Methods</button></div>""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" class="t\
+                    able-tab">Abstract Methods</button>\
+                    <button id="method-summary-table-tab5" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab5', 3)" class="t\
+                    able-tab">Default Methods</button>\
+                    </div>""");
 
         checkOutput("pkg/B.html", true,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t3" class="table-tab" onclick="show(4);">Abstract Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="table\
-                    -tab" onclick="show(8);">Concrete Methods</button></div>""",
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" class="t\
+                    able-tab">Abstract Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    </div>""",
                 """
-                    <td class="col-first"><code>abstract void</code></td>""");
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-ta\
+                    ble method-summary-table-tab3"><code>abstract void</code></div>""");
 
         checkOutput("pkg/C.html", true,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t5" class="table-tab" onclick="show(16);">Default Method\
-                    s</button></div>""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab5" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab5', 3)" class="t\
+                    able-tab">Default Methods</button>\
+                    </div>""");
 
         checkOutput("pkg/A.html", false,
                 """
-                    <td class="col-first"><code>abstract void</code></td>""");
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-ta\
+                    ble method-summary-table-tab3"><code>abstract void</code></div>""");
 
         checkOutput("pkg/B.html", false,
                 """
-                    <button role="tab" aria-selected="false" aria-controls="method-summary.tabpanel"\
-                     tabindex="-1" onkeydown="switchTab(event)" id="t5" class="table-tab" onclick="s\
-                    how(16);">Default Methods</button>""",
+                    Default Methods""",
                 """
-                    <td class="col-first"><code>default void</code></td>""");
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-ta\
+                    ble-tab5 method-summary-table"><code>default void</code></div>""");
 
         checkOutput("pkg/C.html", false,
                 """
-                    <button role="tab" aria-selected="false" aria-controls="method-summary.tabpanel"\
-                     tabindex="-1" onkeydown="switchTab(event)" id="t3" class="table-tab" onclick="s\
-                    how(4);">Abstract Methods</button><span class="tab-end">&nbsp;</span>""");
+                    Abstract Methods""");
     }
 }

test/langtools/jdk/javadoc/doclet/testAnnotationTypes/TestAnnotationTypes.java

@@ -60,8 +60,8 @@ public class TestAnnotationTypes extends JavadocTester {
                 "<!-- =========== FIELD SUMMARY =========== -->",
                 "<h2>Field Summary</h2>",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#DEFAULT_NAME">DEFAULT_NAME</a></span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="\
+                    #DEFAULT_NAME">DEFAULT_NAME</a></span></code></div>""",
                 "<!-- ============ FIELD DETAIL =========== -->",
                 """
                     <section class="detail" id="DEFAULT_NAME">

test/langtools/jdk/javadoc/doclet/testDeprecatedDocs/TestDeprecatedDocs.java

@@ -151,60 +151,63 @@ public class TestDeprecatedDocs extends JavadocTester {
                      of deprecated description for a constructor.</div>
                     </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last even-row-color">
                     <div class="block"><span class="deprecated-label">Deprecated.</span>
                     <div class="deprecation-comment">class_test2 passes.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last even-row-color">
                     <div class="block"><span class="deprecated-label">Deprecated, for removal: This \
                     API element is subject to removal in a future version.</span>
                     <div class="deprecation-comment">class_test3 passes.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last odd-row-color">
                     <div class="block"><span class="deprecated-label">Deprecated, for removal: This \
                     API element is subject to removal in a future version.</span>
                     <div class="deprecation-comment">class_test4 passes.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b6 method-summary-table-tab4 method-summary-table">
                     <div class="block"><span class="deprecated-label">Deprecated.</span>
                     <div class="deprecation-comment">class_test5 passes.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b6 method-summary-table-tab4 method-summary-table">
                     <div class="block"><span class="deprecated-label">Deprecated.</span>
                     <div class="deprecation-comment">class_test6 passes.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
-                    <td class="col-last">
+                    <div class="col-last odd-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b6 method-summary-table-tab4 method-summary-table">
                     <div class="block"><span class="deprecated-label">Deprecated.</span>
                     <div class="deprecation-comment">class_test7 passes.</div>
                     </div>
-                    </td>""");
+                    </div>""");
 
         checkOutput("pkg/TestClass.html", false,
                 """
                     <div class="deprecation-comment">class_test2 passes. This is the second sentence\
                      of deprecated description for a field.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
                     <div class="deprecation-comment">class_test3 passes. This is the second sentence\
                      of deprecated description for a constructor.</div>
                     </div>
-                    </td>""",
+                    </div>""",
                 """
                     <div class="deprecation-comment">class_test4 passes. This is the second sentence\
                      of deprecated description for a method.</div>
                     </div>
-                    </td>""");
+                    </div>""");
 
         checkOutput("pkg/TestEnum.html", true,
                 """
@@ -275,178 +278,104 @@ public class TestDeprecatedDocs extends JavadocTester {
                     <li><a href="#annotation.type.member">Annotation Type Elements</a></li>
                     </ul>""",
                 """
-                    <div class="deprecated-summary" id="forRemoval">
-                    <table class="summary-table">
-                    <caption><span>For Removal</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Element</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""",
+                    <div id="forRemoval">
+                    <div class="caption"><span>For Removal</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Element</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <div class="deprecated-summary" id="enum">
-                    <table class="summary-table">
-                    <caption><span>Enums</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Enum</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestEnum.html" title="enum in pkg">pkg.TestEnum</a></th>
-                    <td class="col-last">
+                    <div id="enum">
+                    <div class="caption"><span>Enums</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Enum</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestEnum.html" title="enum in pkg">pkg.TestEnum</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">enum_test1 passes.</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
                     </div>""",
                 """
-                    <div class="deprecated-summary" id="exception">
-                    <table class="summary-table">
-                    <caption><span>Exceptions</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Exceptions</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestException.html\
-                    " title="class in pkg">pkg.TestException</a></th>
-                    <td class="col-last">
+                    <div id="exception">
+                    <div class="caption"><span>Exceptions</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Exceptions</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestException.html" title="class in pkg">pkg.TestException</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">exception_test1 passes.</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
                     </div>""",
                 """
-                    <div class="deprecated-summary" id="field">
-                    <table class="summary-table">
-                    <caption><span>Fields</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/DeprecatedClassByA\
-                    nnotation.html#field">pkg.DeprecatedClassByAnnotation.field</a></th>
-                    <td class="col-last"></td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestAnnotationType\
-                    .html#field">pkg.TestAnnotationType.field</a></th>
-                    <td class="col-last">
+                    <div id="field">
+                    <div class="caption"><span>Fields</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Field</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/DeprecatedClassByAnnotation.html#field">pkg.DeprecatedClassByAnnotation.field</a></div>
+                    <div class="col-last even-row-color"></div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestAnnotationType.html#field">pkg.TestAnnotationType.field</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">annotation_test4 passes.</div>
-                    </td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#field">pkg.TestClass.field</a></th>
-                    <td class="col-last">
-                    <div class="deprecation-comment">class_test2 passes. This is the second sentence\
-                     of deprecated description for a field.</div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestError.html#field">pkg.TestError.field</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestClass.html#field">pkg.TestClass.field</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="deprecation-comment">class_test2 passes. This is the second sentence of deprecated description for a field.</div>
+                    </div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestError.html#field">pkg.TestError.field</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">error_test2 passes.</div>
-                    </td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestException.html#field">pkg.TestException.field</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestException.html#field">pkg.TestException.field</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">exception_test2 passes.</div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestInterface.html#field">pkg.TestInterface.field</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestInterface.html#field">pkg.TestInterface.field</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">interface_test2 passes.</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    </div>
+                    </div>
                     </div>""",
                 """
-                    <div class="deprecated-summary" id="method">
-                    <table class="summary-table">
-                    <caption><span>Methods</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/DeprecatedClassByAnnotation.html#method()">pkg.DeprecatedClassByAnnotation.method()</a></th>
-                    <td class="col-last"></td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestAnnotationType.html#optional()">pkg.TestAnnotationType.optional()</a></th>
-                    <td class="col-last">
+                    <div id="method">
+                    <div class="caption"><span>Methods</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Method</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/DeprecatedClassByAnnotation.html#method()">pkg.DeprecatedClassByAnnotation.method()</a></div>
+                    <div class="col-last even-row-color"></div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestAnnotationType.html#optional()">pkg.TestAnnotationType.optional()</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">annotation_test2 passes.</div>
-                    </td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestAnnotationType.html#required()">pkg.TestAnnotationType.required()</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestAnnotationType.html#required()">pkg.TestAnnotationType.required()</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">annotation_test3 passes.</div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#method()">pkg.TestClass.method()</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestClass.html#method()">pkg.TestClass.method()</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">class_test5 passes. This is the second sentence of deprecated description for a method.</div>
-                    </td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#overloadedMethod(int)">pkg.TestClass.overloadedMethod&#8203;(int)</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestClass.html#overloadedMethod(int)">pkg.TestClass.overloadedMethod&#8203;(int)</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">class_test7 passes. Overloaded method 2.</div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#overloadedMethod(java.lang.String)">pkg.TestClass.overloadedMethod&#8203;(String)</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestClass.html#overloadedMethod(java.lang.String)">pkg.TestClass.overloadedMethod&#8203;(String)</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">class_test6 passes. Overloaded method 1.</div>
-                    </td>
-                    </tr>""",
+                    </div>""",
                 """
-                    <div class="deprecated-summary" id="constructor">
-                    <table class="summary-table">
-                    <caption><span>Constructors</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Constructor</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/DeprecatedClassByAnnotation.html#%3Cinit%3E()">pkg.DeprecatedClassByAnnotation()</a></th>
-                    <td class="col-last"></td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#%3Cinit%3E()">pkg.TestClass()</a></th>
-                    <td class="col-last">
+                    <div id="constructor">
+                    <div class="caption"><span>Constructors</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Constructor</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/DeprecatedClassByAnnotation.html#%3Cinit%3E()">pkg.DeprecatedClassByAnnotation()</a></div>
+                    <div class="col-last even-row-color"></div>
+                    <div class="col-deprecated-item-name odd-row-color"><a href="pkg/TestClass.html#%3Cinit%3E()">pkg.TestClass()</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="deprecation-comment">class_test3 passes. This is the second sentence of deprecated description for a constructor.</div>
-                    </td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="pkg/TestClass.html#%3Cinit%3E(java.lang.String)">pkg.TestClass&#8203;(String)</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-deprecated-item-name even-row-color"><a href="pkg/TestClass.html#%3Cinit%3E(java.lang.String)">pkg.TestClass&#8203;(String)</a></div>
+                    <div class="col-last even-row-color">
                     <div class="deprecation-comment">class_test4 passes. Overloaded constructor.</div>
-                    </td>
-                    </tr>""");
+                    </div>""");
     }
 }

test/langtools/jdk/javadoc/doclet/testGroupName/TestGroupName.java

@@ -66,10 +66,10 @@ public class TestGroupName extends JavadocTester {
 
         checkOutput("index.html", true,
                 """
-                    <button role="tab" aria-selected="false" aria-controls="all-packages-table.tabpa\
-                    nel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" onclic\
-                    k="show(1);">abc &lt; &amp; &gt; def</button>""",
-                ",\"abc < & > def\"],");
+                    <button id="all-packages-table-tab1" role="tab" aria-selected="false" aria-contr\
+                    ols="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" onc\
+                    lick="show('all-packages-table', 'all-packages-table-tab1', 2)" class="table-tab\
+                    ">abc &lt; &amp; &gt; def</button>""");
     }
 
     @Test
@@ -102,10 +102,10 @@ public class TestGroupName extends JavadocTester {
 
         checkOutput("index.html", true,
                 """
-                    <button role="tab" aria-selected="false" aria-controls="all-modules-table.tabpan\
-                    el" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table-tab" onclick\
-                    ="show(2);">Other Modules</button>""",
-                ",\"abc < & > def\"],");
+                    <button id="all-modules-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab2', 2)" class="table-tab">Ot\
+                    her Modules</button>""");
     }
 }
 

test/langtools/jdk/javadoc/doclet/testHeadings/TestHeadings.java

@@ -54,40 +54,40 @@ public class TestHeadings extends JavadocTester {
         //Package summary
         checkOutput("pkg1/package-summary.html", true,
                 """
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Class documentation
         checkOutput("pkg1/C1.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Field</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
                     <h3 id="methods.inherited.from.class.java.lang.Object">Methods inherited from class&nbsp;java.lang.Object</h3>""");
 
         // Class use documentation
         checkOutput("pkg1/class-use/C1.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Field</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Deprecated
         checkOutput("deprecated-list.html", true,
                 """
-                    <th class="col-first" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Constant values
         checkOutput("constant-values.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Constant Field</th>
-                    <th class="col-last" scope="col">Value</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Constant Field</div>
+                    <div class="table-header col-last">Value</div>""");
 
         // Serialized Form
         checkOutput("serialized-form.html", true,

test/langtools/jdk/javadoc/doclet/testHtmlTableStyles/TestHtmlTableStyles.java

@@ -23,7 +23,7 @@
 
 /*
  * @test
- * @bug 8008164 8169819 8183037 8182765 8196202 8184205 8242649
+ * @bug 8008164 8169819 8183037 8182765 8196202 8184205 8242649 8253117
  * @summary Test styles on HTML tables generated by javadoc.
  * @library ../../lib
  * @modules jdk.javadoc/jdk.javadoc.internal.tool
@@ -59,38 +59,37 @@ public class TestHtmlTableStyles extends JavadocTester {
                 """
                     <table summary="Summary" border cellpadding=3 cellspacing=1>""",
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Fields</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Constructors</span></div>
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">""");
 
         checkOutput("pkg1/package-summary.html", true,
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""");
+                    <div class="caption"><span>Class Summary</span></div>
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg1/class-use/TestTable.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("index.html", true,
                 """
-                    <div class="overview-summary" id="all-packages-table">
-                    <table class="summary-table">""");
+                    <div id="all-packages-table">
+                    <div class="caption"><span>Packages</span></div>
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("deprecated-list.html", true,
             """
-                <div class="deprecated-summary" id="method">
-                <table class="summary-table">""");
+                    <div id="method">
+                    <div class="caption"><span>Methods</span></div>
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("constant-values.html", true,
             """
-                <div class="constants-summary">
-                <table class="summary-table">""");
+                <div class="summary-table three-column-summary">""");
     }
 }

test/langtools/jdk/javadoc/doclet/testHtmlTableTags/TestHtmlTableTags.java

@@ -66,121 +66,95 @@ public class TestHtmlTableTags extends JavadocTester {
         //Package summary
         checkOutput("pkg1/package-summary.html", true,
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/package-summary.html", true,
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         // Class documentation
         checkOutput("pkg1/C1.html", true,
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table three-column-summary">""",
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">""");
 
         checkOutput("pkg2/C2.html", true,
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table three-column-summary">""",
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">""");
 
         checkOutput("pkg2/C2.ModalExclusionType.html", true,
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/C3.html", true,
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary">""");
 
         checkOutput("pkg2/C4.html", true,
                 """
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary">""");
 
         // Class use documentation
         checkOutput("pkg1/class-use/I1.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg1/class-use/C1.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/class-use/C2.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/class-use/C2.ModalExclusionType.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/class-use/C2.ModalExclusionType.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         // Package use documentation
         checkOutput("pkg1/package-use.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("pkg2/package-use.html", true,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         // Deprecated
         checkOutput("deprecated-list.html", true,
                 """
-                    <div class="deprecated-summary" id="field">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
-                    <div class="deprecated-summary" id="method">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
 
         // Constant values
         checkOutput("constant-values.html", true,
                 """
-                    <div class="constants-summary">
-                    <table class="summary-table">""");
+                    <div class="summary-table three-column-summary">""");
 
         // Overview Summary
         checkOutput("index.html", true,
                 """
-                    <div class="overview-summary" id="all-packages-table">
-                    <table class="summary-table">""");
+                    <div class="summary-table two-column-summary">""");
     }
 
     /*
@@ -313,98 +287,105 @@ public class TestHtmlTableTags extends JavadocTester {
     void checkHtmlTableCaptions() {
         //Package summary
         checkOutput("pkg1/package-summary.html", true,
-                "<caption><span>Class Summary</span></caption>",
-                "<caption><span>Interface Summary</span></caption>");
+                "<div class=\"caption\"><span>Class Summary</span></div>",
+                "<div class=\"caption\"><span>Interface Summary</span></div>");
 
         checkOutput("pkg2/package-summary.html", true,
-                "<caption><span>Enum Summary</span></caption>",
-                "<caption><span>Annotation Types Summary</span></caption>");
+                "<div class=\"caption\"><span>Enum Summary</span></div>",
+                "<div class=\"caption\"><span>Annotation Types Summary</span></div>");
 
         // Class documentation
         checkOutput("pkg1/C1.html", true,
-                "<caption><span>Fields</span></caption>",
+                "<div class=\"caption\"><span>Fields</span></div>",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t4" class="table-tab" onclick="show(8);">Concrete Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t6" class="table\
-                    -tab" onclick="show(32);">Deprecated Methods</button></div>
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    <button id="method-summary-table-tab6" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab6', 3)" class="t\
+                    able-tab">Deprecated Methods</button>\
+                    </div>
                     """);
 
         checkOutput("pkg2/C2.html", true,
-                "<caption><span>Nested Classes</span></caption>",
-                "<caption><span>Constructors</span></caption>");
+                "<div class=\"caption\"><span>Nested Classes</span></div>",
+                "<div class=\"caption\"><span>Constructors</span></div>");
 
         checkOutput("pkg2/C2.ModalExclusionType.html", true,
-                "<caption><span>Enum Constants</span></caption>");
+                "<div class=\"caption\"><span>Enum Constants</span></div>");
 
         checkOutput("pkg2/C3.html", true,
-                "<caption><span>Required Elements</span></caption>");
+                "<div class=\"caption\"><span>Required Elements</span></div>");
 
         checkOutput("pkg2/C4.html", true,
-                "<caption><span>Optional Elements</span></caption>");
+                "<div class=\"caption\"><span>Optional Elements</span></div>");
 
         // Class use documentation
         checkOutput("pkg1/class-use/I1.html", true,
                 """
-                    <caption><span>Packages that use <a href="../I1.html" title="interface in pkg1">I1</a></span></caption>""");
+                    <div class="caption"><span>Packages that use <a href="../I1.html" title="interface in pkg1">I1</a></span></div>""");
 
         checkOutput("pkg1/class-use/C1.html", true,
                 """
-                    <caption><span>Fields in <a href="../../pkg2/package-summary.html">pkg2</a> decl\
-                    ared as <a href="../C1.html" title="class in pkg1">C1</a></span></caption>""",
+                    <div class="caption"><span>Fields in <a href="../../pkg2/package-summary.html">pkg2</a> decl\
+                    ared as <a href="../C1.html" title="class in pkg1">C1</a></span></div>""",
                 """
-                    <caption><span>Methods in <a href="../../pkg2/package-summary.html">pkg2</a> tha\
-                    t return <a href="../C1.html" title="class in pkg1">C1</a></span></caption>""");
+                    <div class="caption"><span>Methods in <a href="../../pkg2/package-summary.html">pkg2</a> tha\
+                    t return <a href="../C1.html" title="class in pkg1">C1</a></span></div>""");
 
         checkOutput("pkg2/class-use/C2.html", true,
                 """
-                    <caption><span>Fields in <a href="../../pkg1/package-summary.html">pkg1</a> decl\
-                    ared as <a href="../C2.html" title="class in pkg2">C2</a></span></caption>""",
+                    <div class="caption"><span>Fields in <a href="../../pkg1/package-summary.html">pkg1</a> decl\
+                    ared as <a href="../C2.html" title="class in pkg2">C2</a></span></div>""",
                 """
-                    <caption><span>Methods in <a href="../../pkg1/package-summary.html">pkg1</a> tha\
-                    t return <a href="../C2.html" title="class in pkg2">C2</a></span></caption>""");
+                    <div class="caption"><span>Methods in <a href="../../pkg1/package-summary.html">pkg1</a> tha\
+                    t return <a href="../C2.html" title="class in pkg2">C2</a></span></div>""");
 
         checkOutput("pkg2/class-use/C2.ModalExclusionType.html", true,
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> that return\
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a> that return\
                      <a href="../C2.ModalExclusionType.html" title="enum in pkg2">C2.ModalExclusionT\
-                    ype</a></span></caption>""");
+                    ype</a></span></div>""");
 
         // Package use documentation
         checkOutput("pkg1/package-use.html", true,
                 """
-                    <caption><span>Packages that use <a href="package-summary.html">pkg1</a></span></caption>""",
+                    <div class="caption"><span>Packages that use <a href="package-summary.html">pkg1</a></span></div>""",
                 """
-                    <caption><span>Classes in <a href="package-summary.html">pkg1</a> used by <a hre\
-                    f="package-summary.html">pkg1</a></span></caption>""");
+                    <div class="caption"><span>Classes in <a href="package-summary.html">pkg1</a> used by <a hre\
+                    f="package-summary.html">pkg1</a></span></div>""");
 
         checkOutput("pkg2/package-use.html", true,
                 """
-                    <caption><span>Packages that use <a href="package-summary.html">pkg2</a></span></caption>""",
+                    <div class="caption"><span>Packages that use <a href="package-summary.html">pkg2</a></span></div>""",
                 """
-                    <caption><span>Classes in <a href="package-summary.html">pkg2</a> used by <a hre\
-                    f="../pkg1/package-summary.html">pkg1</a></span></caption>""");
+                    <div class="caption"><span>Classes in <a href="package-summary.html">pkg2</a> used by <a hre\
+                    f="../pkg1/package-summary.html">pkg1</a></span></div>""");
 
         // Deprecated
         checkOutput("deprecated-list.html", true,
-                "<caption><span>Fields</span></caption>",
-                "<caption><span>Methods</span></caption>");
+                "<div class=\"caption\"><span>Fields</span></div>",
+                "<div class=\"caption\"><span>Methods</span></div>");
 
         // Constant values
         checkOutput("constant-values.html", true,
                 """
-                    <caption><span>pkg1.<a href="pkg1/C1.html" title="class in pkg1">C1</a></span></caption>""");
+                    <div class="caption"><span>pkg1.<a href="pkg1/C1.html" title="class in pkg1">C1</a></span></div>""");
 
         // Overview Summary
         checkOutput("index.html", true,
-                "<caption><span>Packages</span></caption>");
+                "<div class=\"caption\"><span>Packages</span></div>");
     }
 
     /*
@@ -414,129 +395,129 @@ public class TestHtmlTableTags extends JavadocTester {
         //Package summary
         checkOutput("pkg1/package-summary.html", true,
                 """
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Interface</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Interface</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/package-summary.html", true,
                 """
-                    <th class="col-first" scope="col">Enum</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Enum</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Annotation Type</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Annotation Type</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Class documentation
         checkOutput("pkg1/C1.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Field</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/C2.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Class</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Constructor</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Constructor</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/C2.ModalExclusionType.html", true,
                 """
-                    <th class="col-first" scope="col">Enum Constant</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Enum Constant</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/C3.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Required Element</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Required Element</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/C4.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Optional Element</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Optional Element</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Class use documentation
         checkOutput("pkg1/class-use/I1.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg1/class-use/C1.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Field</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/class-use/C2.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Field</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/class-use/C2.ModalExclusionType.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Package use documentation
         checkOutput("pkg1/package-use.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>""");
 
         checkOutput("pkg2/package-use.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Deprecated
         checkOutput("deprecated-list.html", true,
                 """
-                    <th class="col-first" scope="col">Field</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="table-header col-first">Field</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <th class="col-first" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Method</div>
+                    <div class="table-header col-last">Description</div>""");
 
         // Constant values
         checkOutput("constant-values.html", true,
                 """
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Constant Field</th>
-                    <th class="col-last" scope="col">Value</th>""");
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Constant Field</div>
+                    <div class="table-header col-last">Value</div>""");
 
         // Overview Summary
         checkOutput("index.html", true,
                 """
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>""");
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""");
     }
 }

test/langtools/jdk/javadoc/doclet/testHtmlVersion/TestHtmlVersion.java

@@ -75,9 +75,9 @@ public class TestHtmlVersion extends JavadocTester {
                     <ul id="navbar.top.firstrow" class="nav-list" title="Navigation">
                     """,
                 """
-                    <div class="overview-summary" id="all-packages-table">
-                    <table class="summary-table">
-                    <caption>""",
+                    <div id="all-packages-table">
+                    <div class="caption"><span>Packages</span></div>
+                    <div class="summary-table two-column-summary">""",
                 """
                     <header role="banner" class="flex-header">
                     <nav role="navigation">
@@ -95,8 +95,7 @@ public class TestHtmlVersion extends JavadocTester {
                     <ul id="navbar.top.firstrow" class="nav-list" title="Navigation">
                     """,
                 """
-                    <div class="type-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
                     <header role="banner" class="flex-header">
                     <nav role="navigation">
@@ -114,12 +113,11 @@ public class TestHtmlVersion extends JavadocTester {
         // No package description
         checkOutput("pkg1/package-summary.html", true,
                 """
-                    <section class="summary">
-                    <ul class="summary-list">
-                    <li>
-                    <div class="type-summary">
-                    <table class="summary-table">
-                    <caption><span>Class Summary</span></caption>""");
+                        <section class="summary">
+                        <ul class="summary-list">
+                        <li>
+                        <div class="caption"><span>Class Summary</span></div>
+                        <div class="summary-table two-column-summary">""");
 
         // Test for package-tree page
         checkOutput("pkg/package-tree.html", true,
@@ -161,8 +159,7 @@ public class TestHtmlVersion extends JavadocTester {
                     <ul id="navbar.top.firstrow" class="nav-list" title="Navigation">
                     """,
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
                     <header role="banner" class="flex-header">
                     <nav role="navigation">
@@ -183,8 +180,7 @@ public class TestHtmlVersion extends JavadocTester {
                     <ul id="navbar.top.firstrow" class="nav-list" title="Navigation">
                     """,
                 """
-                    <div class="constants-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table three-column-summary">""",
                 """
                     <header role="banner" class="flex-header">
                     <nav role="navigation">
@@ -213,8 +209,7 @@ public class TestHtmlVersion extends JavadocTester {
                     <ul id="navbar.top.firstrow" class="nav-list" title="Navigation">
                     """,
                 """
-                    <div class="deprecated-summary" id="class">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
                     <header role="banner" class="flex-header">
                     <nav role="navigation">
@@ -362,18 +357,18 @@ public class TestHtmlVersion extends JavadocTester {
                 """
                     <section class="nested-class-summary" id="nested.class.summary">
                     <h2>Nested Class Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Nested Classes</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     <section class="field-summary" id="field.summary">
                     <h2>Field Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Fields</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     <section class="constructor-summary" id="constructor.summary">
                     <h2>Constructor Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Constructors</span></div>
+                    <div class="summary-table two-column-summary">""",
                 """
                     <section class="method-summary" id="method.summary">
                     <h2>Method Summary</h2>""",
@@ -412,18 +407,16 @@ public class TestHtmlVersion extends JavadocTester {
                 """
                     <section class="constants-summary" id="enum.constant.summary">
                     <h2>Enum Constant Summary</h2>
-                    <div class="member-summary">
+                    <div class="caption"><span>Enum Constants</span></div>
                     """,
                 """
-                    <table class="summary-table" aria-labelledby="t0">
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">
                     """,
                 """
                     <section class="method-summary" id="method.summary">
                     <h2>Method Summary</h2>
-                    <div class="member-summary" id="method-summary-table">
+                    <div id="method-summary-table">
                     """,
-                """
-                    <table class="summary-table" aria-labelledby="t0">""",
                 """
                     <section class="constant-details" id="enum.constant.detail">
                     <h2>Enum Constant Details</h2>
@@ -455,10 +448,10 @@ public class TestHtmlVersion extends JavadocTester {
                 """
                     <section class="method-summary" id="method.summary">
                     <h2>Method Summary</h2>
-                    <div class="member-summary" id="method-summary-table">
+                    <div id="method-summary-table">
                     """,
                 """
-                    <table class="summary-table" aria-labelledby="t0">
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">
                     """,
                 """
                     <section class="method-details" id="method.detail">
@@ -541,13 +534,13 @@ public class TestHtmlVersion extends JavadocTester {
                 """
                     <section class="member-summary" id="annotation.type.required.element.summary">
                     <h2>Required Element Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Required Elements</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     <section class="member-summary" id="annotation.type.optional.element.summary">
                     <h2>Optional Element Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Optional Elements</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     <section class="details" id="annotation.type.element.detail">
                     <ul class="details-list">
@@ -576,14 +569,15 @@ public class TestHtmlVersion extends JavadocTester {
                     <main role="main">
                     <div class="header">""",
                 """
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="summary-table two-column-summary">""",
                 """
                     <section class="detail" id="pkg">
                     <h2>Uses of <a href="../RegClass.html" title="class in pkg1">RegClass</a> in <a \
                     href="../../pkg/package-summary.html">pkg</a></h2>
-                    <div class="use-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Fields in <a href="../../pkg/package-summary.html">pk\
+                    g</a> declared as <a href="../RegClass.html" title="class in pkg1">RegClass</a><\
+                    /span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     <footer role="contentinfo">
                     <nav role="navigation">

test/langtools/jdk/javadoc/doclet/testInterface/TestInterface.java

@@ -135,11 +135,15 @@ public class TestInterface extends JavadocTester {
                     <div class="block">A hider field</div>""",
 
                 """
-                    <td class="col-first"><code>static void</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#m()">m</a></span>()</code></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color method-summary-table-tab1 method-summary-table-t\
+                    ab4 method-summary-table"><code>static void</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab1 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#m()">m\
+                    </a></span>()</code></div>
+                    <div class="col-last even-row-color method-summary-table-tab1 method-summary-table-ta\
+                    b4 method-summary-table">
                     <div class="block">A hider method</div>
-                    </td>
+                    </div>
                     """,
 
                 """

test/langtools/jdk/javadoc/doclet/testJavaFX/TestJavaFX.java

@@ -74,25 +74,24 @@ public class TestJavaFX extends JavadocTester {
                     <dl class="notes">
                     <dt>Property description:</dt>""",
                 """
-                    <td class="col-first"><code><a href="C.DoubleProperty.html" title="class in pkg1">C.DoubleProperty</a></code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#rateProperty">rate</a></span></code></th>
-                    <td class="col-last">
+                    <div class="col-first odd-row-color"><code><a href="C.DoubleProperty.html" title="class in pkg1">C.DoubleProperty</a></code></div>
+                    <div class="col-second odd-row-color"><code><span class="member-name-link"><a href="#rateProperty">rate</a></span></code></div>
+                    <div class="col-last odd-row-color">
                     <div class="block">Defines the direction/speed at which the <code>Timeline</code> is expected to
-                     be played.</div>
-                    </td>""",
+                     be played.</div>""",
                 "<dt>Default value:</dt>",
                 """
                     <dt>Since:</dt>
                     <dd>JavaFX 8.0</dd>""",
                 "<dt>Property description:</dt>",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#setTestMethodProperty()">setTestMethodProperty</a></span>()</code></th>""",
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#setTes\
+                    tMethodProperty()">setTestMethodProperty</a></span>()</code></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#pausedProperty">paused</a></span></code></th>
-                    <td class="col-last">
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="\
+                    #pausedProperty">paused</a></span></code></div>
+                    <div class="col-last even-row-color">
                     <div class="block">Defines if paused.</div>""",
                 """
                     <section class="detail" id="pausedProperty">
@@ -175,37 +174,40 @@ public class TestJavaFX extends JavadocTester {
                 """
                     <section class="property-summary" id="property.summary">
                     <h2>Property Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">
-                    <caption><span>Properties</span></caption>""",
+                    <div class="caption"><span>Properties</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
-                    <tr class="alt-color">
-                    <td class="col-first"><code><a href="C.BooleanProperty.html" title="class in pkg1">C.BooleanProperty</a></code></td>
+                    <div class="col-first even-row-color"><code><a href="C.BooleanProperty.html" title="class in pkg1">C.BooleanProperty</a></code></div>
                     """,
                 """
-                    <tr class="row-color">
-                    <td class="col-first"><code><a href="C.DoubleProperty.html" title="class in pkg1">C.DoubleProperty</a></code></td>
+                    <div class="col-first odd-row-color"><code><a href="C.DoubleProperty.html" title="class in pkg1">C.DoubleProperty</a></code></div>
                     """);
 
         checkOutput("pkg1/C.html", false,
                 "A()",
                 """
-                    <h2 id="property.summary">Property Summary</h2>
-                    <div class="member-summary">
-                    <div role="tablist" aria-orientation="horizontal"><button role="tab" aria-select\
-                    ed="true" aria-controls="member-summary_tabpanel" tabindex="0" onkeydown="switch\
-                    Tab(event)" id="t0" class="active-table-tab">All Methods</button><button role="t\
-                    ab" aria-selected="false" aria-controls="member-summary_tabpanel" tabindex="-1" \
-                    onkeydown="switchTab(event)" id="t2" class="table-tab" onclick="show(2);">Instan\
-                    ce Methods</button><button role="tab" aria-selected="false" aria-controls="membe\
-                    r-summary_tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="ta\
-                    ble-tab" onclick="show(8);">Concrete Methods</button></div>""",
+                    <h2>Property Summary</h2>
+                    <div id="method-summary-table">
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    </div>""",
                 """
-                    <tr id="i0" class="alt-color">
+                    <tr id="i0" class="even-row-color">
                     <td class="col-first"><code><a href="C.BooleanProperty.html" title="class in pkg1">C.BooleanProperty</a></code></td>
                     """,
                 """
-                    <tr id="i1" class="row-color">
+                    <tr id="i1" class="odd-row-color">
                     <td class="col-first"><code><a href="C.DoubleProperty.html" title="class in pkg1">C.DoubleProperty</a></code></td>
                     """);
 
@@ -272,22 +274,27 @@ public class TestJavaFX extends JavadocTester {
                 """
                     <section class="property-summary" id="property.summary">
                     <h2>Property Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">
-                    <caption><span>Properties</span></caption>""");
+                    <div class="caption"><span>Properties</span></div>
+                    <div class="summary-table three-column-summary">""");
 
         checkOutput("pkg2/Test.html", false,
                 """
                     <h2>Property Summary</h2>
-                    <div class="member-summary">
-                    <div role="tablist" aria-orientation="horizontal"><button role="tab" aria-select\
-                    ed="true" aria-controls="member-summary_tabpanel" tabindex="0" onkeydown="switch\
-                    Tab(event)" id="t0" class="active-table-tab">All Methods</button><button role="t\
-                    ab" aria-selected="false" aria-controls="member-summary_tabpanel" tabindex="-1" \
-                    onkeydown="switchTab(event)" id="t2" class="table-tab" onclick="show(2);">Instan\
-                    ce Methods</button><button role="tab" aria-selected="false" aria-controls="membe\
-                    r-summary_tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="ta\
-                    ble-tab" onclick="show(8);">Concrete Methods</button></div>""");
+                    <div id="method-summary-table">
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    </div>""");
     }
 
     /*
@@ -305,38 +312,40 @@ public class TestJavaFX extends JavadocTester {
         checkOutput("pkg2/Test.html", false, "<h2>Property Summary</h2>");
         checkOutput("pkg2/Test.html", true,
                 """
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color" id="i0">
-                    <td class="col-first"><code>&lt;T&gt;&nbsp;java.lang.Object</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#alphaProperty(java.util.List)">alphaProperty</a></span>&#8203;(java.util.List&\
-                    lt;T&gt;&nbsp;foo)</code></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="row-color" id="i1">
-                    <td class="col-first"><code>java.lang.Object</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#betaProperty()">betaProperty</a></span>()</code></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="alt-color" id="i2">
-                    <td class="col-first"><code>java.util.List&lt;java.util.Set&lt;? super java.lang.Object&gt;&gt;</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#deltaProperty()">deltaProperty</a></span>()</code></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="row-color" id="i3">
-                    <td class="col-first"><code>java.util.List&lt;java.lang.String&gt;</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#gammaProperty()">gammaProperty</a></span>()</code></th>
-                    <td class="col-last">&nbsp;</td>"""
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>&lt;T&gt;&nbsp;java.lang.Object</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#alphaP\
+                    roperty(java.util.List)">alphaProperty</a></span>&#8203;(java.util.List&lt;T&gt;\
+                    &nbsp;foo)</code></div>
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b4 method-summary-table">&nbsp;</div>
+                    <div class="col-first odd-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>java.lang.Object</code></div>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#betaPr\
+                    operty()">betaProperty</a></span>()</code></div>
+                    <div class="col-last odd-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b4 method-summary-table">&nbsp;</div>
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>java.util.List&lt;java.util.Set&lt;? super java.\
+                    lang.Object&gt;&gt;</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#deltaP\
+                    roperty()">deltaProperty</a></span>()</code></div>
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b4 method-summary-table">&nbsp;</div>
+                    <div class="col-first odd-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>java.util.List&lt;java.lang.String&gt;</code></d\
+                    iv>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#gammaP\
+                    roperty()">gammaProperty</a></span>()</code></div>
+                    <div class="col-last odd-row-color method-summary-table-tab2 method-summary-table-ta\
+                    b4 method-summary-table">&nbsp;</div>"""
         );
     }
 

test/langtools/jdk/javadoc/doclet/testLambdaFeature/TestLambdaFeature.java

@@ -56,24 +56,32 @@ public class TestLambdaFeature extends JavadocTester {
 
         checkOutput("pkg/A.html", true,
                 """
-                    <td class="col-first"><code>default void</code></td>""",
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-ta\
+                    ble-tab5 method-summary-table"><code>default void</code></div>""",
                 """
                     <div class="member-signature"><span class="modifiers">default</span>&nbsp;<span \
                     class="return-type">void</span>&nbsp;<span class="member-name">defaultMethod</sp\
                     an>()</div>
                     """,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t3" class="table-tab" onclick="show(4);">Abstract Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t5" class="table\
-                    -tab" onclick="show(16);">Default Methods</button></div>""",
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" class="t\
+                    able-tab">Abstract Methods</button>\
+                    <button id="method-summary-table-tab5" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab5', 3)" class="t\
+                    able-tab">Default Methods</button>\
+                    </div>""",
                 """
                     <dl class="notes">
                     <dt>Functional Interface:</dt>

test/langtools/jdk/javadoc/doclet/testLinkOption/TestOptionOrder.java

@@ -119,7 +119,7 @@ public class TestOptionOrder extends JavadocTester {
                 "<dd><a href=\"http://example.com/" + first + "/lib/LibClass.html",
                 // Instance in Field declaration
                 """
-                    <td class="col-first"><code><a href="http://example.com/""" + first + "/lib/LibClass.html"
+                    <div class="col-first even-row-color"><code><a href="http://example.com/""" + first + "/lib/LibClass.html"
                 );
     }
 

test/langtools/jdk/javadoc/doclet/testLists/TestLists.java

@@ -213,8 +213,8 @@ public class TestLists extends JavadocTester {
                     <li>
                     <section class="field-summary" id="field.summary">
                     <h2>Field Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""",
+                    <div class="caption"><span>Fields</span></div>
+                    <div class="summary-table three-column-summary">""",
                 """
                     </section>
                     </li>
@@ -222,8 +222,8 @@ public class TestLists extends JavadocTester {
                     <li>
                     <section class="constructor-summary" id="constructor.summary">
                     <h2>Constructor Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="caption"><span>Constructors</span></div>
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("p/E.html", true,
                 """
@@ -233,8 +233,8 @@ public class TestLists extends JavadocTester {
                     <li>
                     <section class="constants-summary" id="enum.constant.summary">
                     <h2>Enum Constant Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="caption"><span>Enum Constants</span></div>
+                    <div class="summary-table two-column-summary">""");
 
         checkOutput("p/A.html", true,
                 """
@@ -244,8 +244,8 @@ public class TestLists extends JavadocTester {
                     <li>
                     <section class="member-summary" id="annotation.type.required.element.summary">
                     <h2>Required Element Summary</h2>
-                    <div class="member-summary">
-                    <table class="summary-table">""");
+                    <div class="caption"><span>Required Elements</span></div>
+                    <div class="summary-table three-column-summary">""");
 
     }
 }

test/langtools/jdk/javadoc/doclet/testMemberInheritance/TestMemberInheritance.java

@@ -102,11 +102,13 @@ public class TestMemberInheritance extends JavadocTester {
         checkOutput("pkg1/Implementer.html", true,
                 // ensure the method makes it
                 """
-                    <td class="col-first"><code>static java.time.Period</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#between(java.time.LocalDate,java.time.LocalDate)">between</a></span>&#8203;(ja\
-                    va.time.LocalDate&nbsp;startDateInclusive,
-                     java.time.LocalDate&nbsp;endDateExclusive)</code></th>""");
+                    <div class="col-first even-row-color method-summary-table-tab1 method-summary-table-t\
+                    ab4 method-summary-table"><code>static java.time.Period</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab1 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#betwee\
+                    n(java.time.LocalDate,java.time.LocalDate)">between</a></span>&#8203;(java.time.\
+                    LocalDate&nbsp;startDateInclusive,
+                     java.time.LocalDate&nbsp;endDateExclusive)</code></div>""");
 
         checkOutput("pkg1/Implementer.html", false,
                 """
@@ -125,13 +127,14 @@ public class TestMemberInheritance extends JavadocTester {
 
         checkOutput("pkg2/DocumentedNonGenericChild.html", true,
                 """
-                    <td class="col-first"><code>protected abstract java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#parentMethod(T)">parentMethod</a></span>&#8203;(java.lang.String&nbsp;t)</code\
-                    ></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table m\
+                    ethod-summary-table-tab3"><code>protected abstract java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table \
+                    method-summary-table-tab3"><code><span class="member-name-link"><a href="#parent\
+                    Method(T)">parentMethod</a></span>&#8203;(java.lang.String&nbsp;t)</code></div>
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table me\
+                    thod-summary-table-tab3">
                     <div class="block">Returns some value with an inherited search tag.</div>
-                    </td>
                     """);
 
         checkOutput("pkg2/DocumentedNonGenericChild.html", true,
@@ -157,10 +160,10 @@ public class TestMemberInheritance extends JavadocTester {
 
         checkOutput("pkg2/DocumentedNonGenericChild.html", true,
                 """
-                    <td class="col-first"><code>java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#parentField">parentField</a></span></code></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color"><code>java.lang.String</code></div>
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="\
+                    #parentField">parentField</a></span></code></div>
+                    <div class="col-last even-row-color">
                     <div class="block">A field.</div>""",
                 """
                     <section class="detail" id="parentField">
@@ -173,9 +176,11 @@ public class TestMemberInheritance extends JavadocTester {
 
         checkOutput("pkg3/PrivateGenericParent.PublicChild.html", true,
                 """
-                    <td class="col-first"><code>java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#method(T)">method</a></span>&#8203;(java.lang.String&nbsp;t)</code></th>""",
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#method\
+                    (T)">method</a></span>&#8203;(java.lang.String&nbsp;t)</code></div>""",
                 """
                     <section class="detail" id="method(T)">
                     <h3 id="method(java.lang.Object)">method</h3>

test/langtools/jdk/javadoc/doclet/testMemberSummary/TestMemberSummary.java

@@ -53,24 +53,26 @@ public class TestMemberSummary extends JavadocTester {
         checkOutput("pkg/PublicChild.html", true,
                 // Check return type in member summary.
                 """
-                    <code><a href="PublicChild.html" title="class in pkg">PublicChild</a></code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#returnTypeTest()">returnTypeTest</a></span>()</code>""",
+                    <code><a href="PublicChild.html" title="class in pkg">PublicChild</a></code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#return\
+                    TypeTest()">returnTypeTest</a></span>()</code></div>""",
                 // Check return type in member detail.
                 """
                     <div class="member-signature"><span class="modifiers">public</span>&nbsp;<span c\
                     lass="return-type"><a href="PublicChild.html" title="class in pkg">PublicChild</\
                     a></span>&nbsp;<span class="member-name">returnTypeTest</span>()</div>""",
                 """
-                    <th class="col-constructor-name" scope="row"><code><span class="member-name-link\
-                    "><a href="#%3Cinit%3E()">PublicChild</a></span>()</code></th>""");
+                    <div class="col-constructor-name even-row-color"><code><span class="member-name-link"\
+                    ><a href="#%3Cinit%3E()">PublicChild</a></span>()</code></div>
+                    <div class="col-last even-row-color">&nbsp;</div>""");
 
         checkOutput("pkg/PrivateParent.html", true,
                 """
-                    <td class="col-first"><code>private </code></td>
-                    <th class="col-constructor-name" scope="row"><code><span class="member-name-link\
-                    "><a href="#%3Cinit%3E(int)">PrivateParent</a></span>&#8203;(int&nbsp;i)</code><\
-                    /th>""");
+                    <div class="col-first even-row-color"><code>private </code></div>
+                    <div class="col-constructor-name even-row-color"><code><span class="member-name-link"\
+                    ><a href="#%3Cinit%3E(int)">PrivateParent</a></span>&#8203;(int&nbsp;i)</code></\
+                    div>""");
 
         // Legacy anchor dimensions (6290760)
         checkOutput("pkg2/A.html", true,

test/langtools/jdk/javadoc/doclet/testMethodTypes/TestMethodTypes.java

@@ -48,70 +48,89 @@ public class TestMethodTypes extends JavadocTester {
         checkExit(Exit.OK);
 
         checkOutput("pkg1/A.html", true,
-                "var data = {",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table\
-                    -tab" onclick="show(1);">Static Methods</button><button role="tab" aria-selected\
-                    ="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown="\
-                    switchTab(event)" id="t2" class="table-tab" onclick="show(2);">Instance Methods<\
-                    /button><button role="tab" aria-selected="false" aria-controls="method-summary-t\
-                    able.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="table-t\
-                    ab" onclick="show(8);">Concrete Methods</button><button role="tab" aria-selected\
-                    ="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown="\
-                    switchTab(event)" id="t6" class="table-tab" onclick="show(32);">Deprecated Metho\
-                    ds</button></div>""",
-                "<tr class=\"alt-color\" id=\"i0\">");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab1" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab1', 3)" class="t\
+                    able-tab">Static Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    <button id="method-summary-table-tab6" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab6', 3)" class="t\
+                    able-tab">Deprecated Methods</button>\
+                    </div>""",
+                "<div class=\"col-first even-row-color method-summary-table-tab2 method-summary-table-tab4 method-summary-table\">");
 
         checkOutput("pkg1/B.html", true,
                 """
-                    var data = {"i0":6,"i1":18,"i2":18,"i3":1,"i4":1,"i5":6,"i6":6,"i7":6,"i8":6};
-                    """,
-                """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table\
-                    -tab" onclick="show(1);">Static Methods</button><button role="tab" aria-selected\
-                    ="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown="\
-                    switchTab(event)" id="t2" class="table-tab" onclick="show(2);">Instance Methods<\
-                    /button><button role="tab" aria-selected="false" aria-controls="method-summary-t\
-                    able.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t3" class="table-t\
-                    ab" onclick="show(4);">Abstract Methods</button><button role="tab" aria-selected\
-                    ="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown="\
-                    switchTab(event)" id="t5" class="table-tab" onclick="show(16);">Default Methods<\
-                    /button></div>""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab1" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab1', 3)" class="t\
+                    able-tab">Static Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" class="t\
+                    able-tab">Abstract Methods</button>\
+                    <button id="method-summary-table-tab5" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab5', 3)" class="t\
+                    able-tab">Default Methods</button>\
+                    </div>""");
 
         checkOutput("pkg1/D.html", true,
-                "var data = {",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="method-summary-table.tabpanel" tabin\
-                    dex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table\
-                    -tab" onclick="show(2);">Instance Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t3" class="table-tab" onclick="show(4);">Abstract Method\
-                    s</button><button role="tab" aria-selected="false" aria-controls="method-summary\
-                    -table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="table\
-                    -tab" onclick="show(8);">Concrete Methods</button><button role="tab" aria-select\
-                    ed="false" aria-controls="method-summary-table.tabpanel" tabindex="-1" onkeydown\
-                    ="switchTab(event)" id="t6" class="table-tab" onclick="show(32);">Deprecated Met\
-                    hods</button></div>""",
-                "<tr class=\"alt-color\" id=\"i0\">");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="method-summary-table-tab0" role="tab" aria-selected="true" aria-cont\
+                    rols="method-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" o\
+                    nclick="show('method-summary-table', 'method-summary-table', 3)" class="active-t\
+                    able-tab">All Methods</button>\
+                    <button id="method-summary-table-tab2" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab2', 3)" class="t\
+                    able-tab">Instance Methods</button>\
+                    <button id="method-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab3', 3)" class="t\
+                    able-tab">Abstract Methods</button>\
+                    <button id="method-summary-table-tab4" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab4', 3)" class="t\
+                    able-tab">Concrete Methods</button>\
+                    <button id="method-summary-table-tab6" role="tab" aria-selected="false" aria-con\
+                    trols="method-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                     onclick="show('method-summary-table', 'method-summary-table-tab6', 3)" class="t\
+                    able-tab">Deprecated Methods</button>\
+                    </div>""",
+                "<div class=\"col-first even-row-color method-summary-table-tab2 method-summary-table-tab6 method-summary-table-tab4 method-summary-table\">");
 
         checkOutput("pkg1/A.html", false,
-                "<caption><span>Methods</span></caption>");
+                "<div class=\"caption\"><span>Methods</span></div>");
 
         checkOutput("pkg1/B.html", false,
-                "<caption><span>Methods</span></caption>");
+                "<div class=\"caption\"><span>Methods</span></div>");
 
         checkOutput("pkg1/D.html", false,
-                "<caption><span>Methods</span></caption>");
+                "<div class=\"caption\"><span>Methods</span></div>");
     }
 }

test/langtools/jdk/javadoc/doclet/testModules/TestIndirectExportsOpens.java

@@ -161,17 +161,17 @@ public class TestIndirectExportsOpens extends JavadocTester {
         checkOutput("a/module-summary.html", true,
                 "Indirect Exports",
                 """
-                    <th class="col-first" scope="row"><a href="../m/module-summary.html">m</a></th>
-                    <td class="col-last"><a href="../m/exportsto/package-summary.html">exportsto</a></td>
-                    </tr>
+                    <div class="col-first odd-row-color"><a href="../m/module-summary.html">m</a></div>
+                    <div class="col-last odd-row-color"><a href="../m/exportsto/package-summary.html">exportsto</a></div>
+                    </div>
                     """);
 
         checkOutput("a/module-summary.html", true,
                 "Indirect Opens",
                 """
-                    <th class="col-first" scope="row"><a href="../m/module-summary.html">m</a></th>
-                    <td class="col-last">opensto</td>
-                    </tr>
+                    <div class="col-first even-row-color"><a href="../m/module-summary.html">m</a></div>
+                    <div class="col-last even-row-color">opensto</div>
+                    </div>
                     """);
     }
 
@@ -195,23 +195,13 @@ public class TestIndirectExportsOpens extends JavadocTester {
 
         checkOutput("a/module-summary.html", present,
                 """
-                    <div class="packages-summary">
-                    <table class="details-table">
-                    <caption><span>""" + typeString + """
-                    </span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">From</th>
-                    <th class="col-last" scope="col">Packages</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="../m/module-summary.html">m</a></th>
-                    <td class="col-last"><a href="../m/pm/package-summary.html">pm</a></td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    <div class="caption"><span>""" + typeString + """
+                    </span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">From</div>
+                    <div class="table-header col-last">Packages</div>
+                    <div class="col-first even-row-color"><a href="../m/module-summary.html">m</a></div>
+                    <div class="col-last even-row-color"><a href="../m/pm/package-summary.html">pm</a></div>
                     </div>""");
     }
 }

test/langtools/jdk/javadoc/doclet/testModules/TestModulePackages.java

@@ -93,9 +93,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS);
+        checkCaption("m", 3, TabKind.EXPORTS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, " ");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, " ");
     }
 
     @Test
@@ -116,10 +116,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS);
+        checkCaption("m", 3, TabKind.EXPORTS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, " ");
-        checkPackageRow("m", "q", "i1", null, null, " ");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, " ");
+        checkPackageRow("m", "q", 1, "package-summary-table-tab1 package-summary-table", null, null, " ");
     }
 
     @Test
@@ -143,12 +143,12 @@ public class TestModulePackages extends JavadocTester {
 
         // error: the unnamed module reads package p from both o and m
         checkExit(Exit.ERROR);
-        checkCaption("m", TabKind.EXPORTS);
-        checkCaption("o", TabKind.EXPORTS);
+        checkCaption("m", 3, TabKind.EXPORTS);
+        checkCaption("o", 3, TabKind.EXPORTS);
         checkTableHead("m");
         checkTableHead("o");
-        checkPackageRow("m", "p", "i0", null, null, " ");
-        checkPackageRow("o", "p", "i0", null, null, " ");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, " ");
+        checkPackageRow("o", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, " ");
         checkOutput("m/p/package-summary.html", true,
                 """
                     <div class="sub-title"><span class="module-label-in-package">Module</span>&nbsp;<a href="../module-summary.html">m</a></div>
@@ -199,9 +199,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS);
+        checkCaption("m", 3, TabKind.EXPORTS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, "&nbsp;");
 
         javadoc("-d", base.resolve("out-all").toString(),
                 "-quiet",
@@ -211,10 +211,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS);
+        checkCaption("m", 3, TabKind.EXPORTS);
         checkTableHead("m", ColKind.EXPORTED_TO);
-        checkPackageRow("m", "p", "i0", "All Modules", null, "&nbsp;");
-        checkPackageRow("m", "q", "i1",
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", "All Modules", null, "&nbsp;");
+        checkPackageRow("m", "q", 1, "package-summary-table-tab1 package-summary-table",
                 """
                     <a href="../other/module-summary.html">other</a>""", null, "&nbsp;");
     }
@@ -236,9 +236,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS);
+        checkCaption("m", 4, TabKind.EXPORTS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", null, null, "&nbsp;");
 
         javadoc("-d", base.resolve("out-all").toString(),
                 "-quiet",
@@ -249,10 +249,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS, TabKind.CONCEALED);
+        checkCaption("m", 3, TabKind.EXPORTS, TabKind.CONCEALED);
         checkTableHead("m", ColKind.EXPORTED_TO);
-        checkPackageRow("m", "p", "i0", "All Modules", null, "&nbsp;");
-        checkPackageRow("m", "q", "i1", "None", null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table-tab1 package-summary-table", "All Modules", null, "&nbsp;");
+        checkPackageRow("m", "q", 1, "package-summary-table-tab3 package-summary-table", "None", null, "&nbsp;");
     }
 
     @Test
@@ -285,10 +285,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS, TabKind.OPENS);
+        checkCaption("m", 4, TabKind.EXPORTS, TabKind.OPENS);
         checkTableHead("m", ColKind.EXPORTED_TO, ColKind.OPENED_TO);
-        checkPackageRow("m", "e.all", "i0", "All Modules", "None", "&nbsp;");
-        checkPackageRow("m", "eo", "i1", "All Modules", "All Modules", "&nbsp;");
+        checkPackageRow("m", "e.all", 0, "package-summary-table-tab1 package-summary-table", "All Modules", "None", "&nbsp;");
+        checkPackageRow("m", "eo", 1, "package-summary-table-tab1 package-summary-table package-summary-table-tab2", "All Modules", "All Modules", "&nbsp;");
 
         javadoc("-d", base.resolve("out-all").toString(),
                 "-quiet",
@@ -299,16 +299,16 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.EXPORTS, TabKind.OPENS, TabKind.CONCEALED);
+        checkCaption("m", 4, TabKind.EXPORTS, TabKind.OPENS, TabKind.CONCEALED);
         checkTableHead("m", ColKind.EXPORTED_TO, ColKind.OPENED_TO);
-        checkPackageRow("m", "c", "i0", "None", "None", "&nbsp;");
-        checkPackageRow("m", "e.all", "i1", "All Modules", "None", "&nbsp;");
-        checkPackageRow("m", "e.other", "i2",
+        checkPackageRow("m", "c", 0, "package-summary-table-tab3 package-summary-table", "None", "None", "&nbsp;");
+        checkPackageRow("m", "e.all", 1, "package-summary-table-tab1 package-summary-table", "All Modules", "None", "&nbsp;");
+        checkPackageRow("m", "e.other", 2, "package-summary-table-tab1 package-summary-table",
                 """
                     <a href="../other/module-summary.html">other</a>""", "None", "&nbsp;");
-        checkPackageRow("m", "eo", "i3", "All Modules", "All Modules", "&nbsp;");
-        checkPackageRow("m", "o.all", "i4", "None", "All Modules", "&nbsp;");
-        checkPackageRow("m", "o.other", "i5", "None",
+        checkPackageRow("m", "eo", 3, "package-summary-table-tab1 package-summary-table package-summary-table-tab2", "All Modules", "All Modules", "&nbsp;");
+        checkPackageRow("m", "o.all", 4, "package-summary-table package-summary-table-tab2", "None", "All Modules", "&nbsp;");
+        checkPackageRow("m", "o.other", 5, "package-summary-table package-summary-table-tab2", "None",
                 """
                     <a href="../other/module-summary.html">other</a>""", "&nbsp;");
     }
@@ -332,14 +332,14 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null,
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, null,
                 """
 
                     <div class="block">implicitly open package</div>
                     """);
-        checkPackageRow("m", "q", "i1", null, null,
+        checkPackageRow("m", "q", 1, "package-summary-table package-summary-table-tab2", null, null,
                 """
 
                     <div class="block">implicitly open package</div>
@@ -362,9 +362,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, null, "&nbsp;");
     }
 
     @Test
@@ -386,10 +386,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
-        checkPackageRow("m", "q", "i1", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, null, "&nbsp;");
+        checkPackageRow("m", "q", 1, "package-summary-table package-summary-table-tab2", null, null, "&nbsp;");
     }
 
     @Test
@@ -415,9 +415,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, null, "&nbsp;");
 
         javadoc("-d", base.resolve("out-all").toString(),
                 "-quiet",
@@ -428,10 +428,10 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m,other");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m", ColKind.OPENED_TO);
-        checkPackageRow("m", "p", "i0", null, "All Modules", "&nbsp;");
-        checkPackageRow("m", "q", "i1", null,
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, "All Modules", "&nbsp;");
+        checkPackageRow("m", "q", 1, "package-summary-table package-summary-table-tab2", null,
                 """
                     <a href="../other/module-summary.html">other</a>""", "&nbsp;");
     }
@@ -454,9 +454,9 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS);
+        checkCaption("m", 3, TabKind.OPENS);
         checkTableHead("m");
-        checkPackageRow("m", "p", "i0", null, null, "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, null, "&nbsp;");
 
         javadoc("-d", base.resolve("out-all").toString(),
                 "-quiet",
@@ -467,47 +467,55 @@ public class TestModulePackages extends JavadocTester {
                 "--module", "m");
 
         checkExit(Exit.OK);
-        checkCaption("m", TabKind.OPENS, TabKind.CONCEALED);
+        checkCaption("m", 3, TabKind.OPENS, TabKind.CONCEALED);
         checkTableHead("m", ColKind.OPENED_TO);
-        checkPackageRow("m", "p", "i0", null, "All Modules", "&nbsp;");
-        checkPackageRow("m", "q", "i1", null, "None", "&nbsp;");
+        checkPackageRow("m", "p", 0, "package-summary-table package-summary-table-tab2", null, "All Modules", "&nbsp;");
+        checkPackageRow("m", "q", 1, "package-summary-table-tab3 package-summary-table", null, "None", "&nbsp;");
     }
 
 
-    private void checkCaption(String moduleName, TabKind... kinds) {
+    private void checkCaption(String moduleName, int numberOfColumns, TabKind... kinds) {
         String expect;
         if (kinds.length > 1) {
             Set<TabKind> kindSet = Set.of(kinds);
             StringBuilder sb = new StringBuilder();
             sb.append("""
-                <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                e="tab" aria-selected="true" aria-controls="package-summary-table.tabpanel" tabi\
-                ndex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Packa\
-                ges</button>""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="package-summary-table-tab0" role="tab" aria-selected="true" aria-con\
+                    trols="package-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)"\
+                     onclick="show('package-summary-table', 'package-summary-table',\s"""
+                    + numberOfColumns + """
+                    )" class="active-table-tab">All Packages</button>""");
             if (kindSet.contains(TabKind.EXPORTS)) {
                 sb.append("""
-                    <button role="tab" aria-selected="false" aria-controls="package-summary-table.ta\
-                    bpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" onc\
-                    lick="show(1);">Exports</button>""");
+                    <button id="package-summary-table-tab1" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab1',\s"""
+                    + numberOfColumns + """
+                    )" class="table-tab">Exports</button>""");
             }
             if (kindSet.contains(TabKind.OPENS)) {
                 sb.append("""
-                    <button role="tab" aria-selected="false" aria-controls="package-summary-table.ta\
-                    bpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table-tab" onc\
-                    lick="show(2);">Opens</button>""");
+                    <button id="package-summary-table-tab2" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab2',\s"""
+                    + numberOfColumns + """
+                    )" class="table-tab">Opens</button>""");
             }
             if (kindSet.contains(TabKind.CONCEALED)) {
                 sb.append("""
-                    <button role="tab" aria-selected="false" aria-controls="package-summary-table.ta\
-                    bpanel" tabindex="-1" onkeydown="switchTab(event)" id="t3" class="table-tab" onc\
-                    lick="show(4);">Concealed</button>""");
+                   <button id="package-summary-table-tab3" role="tab" aria-selected="false" aria-con\
+                   trols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)"\
+                    onclick="show('package-summary-table', 'package-summary-table-tab3',\s"""
+                   + numberOfColumns + """
+                   )" class="table-tab">Concealed</button>""");
             }
             sb.append("</div>");
             expect = sb.toString();
         } else {
             TabKind k = kinds[0];
             String name = k.toString().charAt(0) + k.toString().substring(1).toLowerCase();
-            expect = "<caption><span>" + name + "</span></caption>";
+            expect = "<div class=\"caption\"><span>" + name + "</span></div>";
         }
 
         checkOutput(moduleName + "/module-summary.html", true, expect);
@@ -518,42 +526,38 @@ public class TestModulePackages extends JavadocTester {
         Set<ColKind> kindSet = Set.of(kinds);
         StringBuilder sb = new StringBuilder();
         sb.append("""
-            <tr>
-            <th class="col-first" scope="col">Package</th>
+            <div class="table-header col-first">Package</div>
             """);
         if (kindSet.contains(ColKind.EXPORTED_TO)) {
             sb.append("""
-                <th class="col-second" scope="col">Exported To Modules</th>
+                <div class="table-header col-second">Exported To Modules</div>
                 """);
         }
         if (kindSet.contains(ColKind.OPENED_TO)) {
             sb.append("""
-                <th class="col-second" scope="col">Opened To Modules</th>
+                <div class="table-header col-second">Opened To Modules</div>
                 """);
         }
         sb.append("""
-            <th class="col-last" scope="col">Description</th>
-            </tr>""");
+            <div class="table-header col-last">Description</div>""");
 
         checkOutput(moduleName + "/module-summary.html", true, sb.toString());
     }
 
-    private void checkPackageRow(String moduleName, String packageName,
-            String id, String exportedTo, String openedTo, String desc) {
+    private void checkPackageRow(String moduleName, String packageName, int index,
+            String classes, String exportedTo, String openedTo, String desc) {
         StringBuilder sb = new StringBuilder();
-        int idNum = Integer.parseInt(id.substring(1));
-        String color = (idNum % 2 == 1 ? "row-color" : "alt-color");
-        sb.append("<tr class=\"" + color + "\" id=\"" + id + """
-            ">
-            <th class="col-first" scope="row"><a href=\"""" + packageName.replace('.', '/') + "/package-summary.html\">"
-                + packageName + "</a></th>\n");
+        String color = (index % 2 == 1 ? "odd-row-color" : "even-row-color");
+        sb.append("<div class=\"col-first " + color + " " + classes + "\"><a href=\""
+                + packageName.replace('.', '/') + "/package-summary.html\">"
+                + packageName + "</a></div>\n");
         if (exportedTo != null) {
-            sb.append("<td class=\"col-second\">" + exportedTo + "</td>\n");
+            sb.append("<div class=\"col-second " + color + " " + classes + "\">" + exportedTo + "</div>\n");
         }
         if (openedTo != null) {
-            sb.append("<td class=\"col-second\">" + openedTo + "</td>\n");
+            sb.append("<div class=\"col-second " + color + " " + classes + "\">" + openedTo + "</div>\n");
         }
-        sb.append("<td class=\"col-last\">" + desc + "</td>");
+        sb.append("<div class=\"col-last " + color + " " + classes + "\">" + desc + "</div>");
 
         checkOutput(moduleName + "/module-summary.html", true, sb.toString());
     }

test/langtools/jdk/javadoc/doclet/testModules/TestModuleServices.java

@@ -135,31 +135,23 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("moduleServiceProvider/module-summary.html", true,
                 """
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="../moduleService/pkgService/Service.h\
-                    tml" title="interface in pkgService">Service</a></th>
-                    <td class="col-last">
-                    <div class="block">Provides a service whose name is ServiceProvider.</div>
-                    </td>
-                    </tr>""");
+                    <div class="col-first even-row-color"><a href="../moduleService/pkgService/Service.ht\
+                    ml" title="interface in pkgService">Service</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="block">Provides a service whose name is ServiceProvider.</div>""");
         checkOutput("moduleServiceUser/module-summary.html", true,
                 """
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="../moduleService/pkgService/Service.h\
-                    tml" title="interface in pkgService">Service</a></th>
-                    <td class="col-last">
-                    <div class="block">If no other provider is found, a default internal implementation will be used.</div>
-                    </td>
-                    </tr>""");
+                    <div class="col-first even-row-color"><a href="../moduleService/pkgService/Service.ht\
+                    ml" title="interface in pkgService">Service</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="block">If no other provider is found, a default internal implementat\
+                    ion will be used.</div>""");
         checkOutput("moduleServiceUserNoDescription/module-summary.html", true,
                 """
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="../moduleService/pkgService/Service.h\
-                    tml" title="interface in pkgService">Service</a></th>
-                    <td class="col-last">
-                    <div class="block">A service Interface for service providers.</div>
-                    </td>
-                    </tr>""");
+                    <div class="col-first even-row-color"><a href="../moduleService/pkgService/Service.ht\
+                    ml" title="interface in pkgService">Service</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="block">A service Interface for service providers.</div>""");
         checkOutput("moduleServiceProvider/module-summary.html", false,
                 "A service Interface for service providers.");
         checkOutput("moduleServiceUser/module-summary.html", false,
@@ -209,26 +201,15 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("m/module-summary.html", true,
                 """
-                    <div class="uses-summary">
-                    <table class="details-table">
-                    <caption><span>Uses</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p1/A.html" title="class in p1">A</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-first" scope="row"><a href="p1/B.html" title="class in p1">B</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    <div class="caption"><span>Uses</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p1/A.html" title="class in p1">A</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>
+                    <div class="col-first odd-row-color"><a href="p1/B.html" title="class in p1">B</a></div>
+                    <div class="col-last odd-row-color">&nbsp;</div>
+                    </div>
                     """);
 
     }
@@ -255,22 +236,13 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("m/module-summary.html", true,
                 """
-                    <div class="uses-summary">
-                    <table class="details-table">
-                    <caption><span>Uses</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p1/A.html" title="class in p1">A</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    <div class="caption"><span>Uses</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p1/A.html" title="class in p1">A</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>
+                    </div>
                     """);
 
     }
@@ -327,27 +299,15 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("m/module-summary.html", true,
                 """
-                    <div class="provides-summary">
-                    <table class="details-table">
-                    <caption><span>Provides</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p1/A.html" title="interface in p1">A</a></th>
-                    <td class="col-last">&nbsp;<br>(<span class="implementation-label">Implementatio\
-                    n(s):</span>&nbsp;<a href="p1/B.html" title="class in p1">B</a>)</td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-first" scope="row"><a href="p2/A.html" title="interface in p2">A</a></th>
-                    <td class="col-last">&nbsp;<br>(<span class="implementation-label">Implementatio\
-                    n(s):</span>&nbsp;<a href="p2/B.html" title="class in p2">B</a>)</td>
-                    </tr>
-                    </tbody>
+                    <div class="caption"><span>Provides</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p1/A.html" title="interface in p1">A</a></div>
+                    <div class="col-last even-row-color">&nbsp;<br>(<span class="implementation-label">Implementation(s):</span>&nbsp;<a href="p1/B.html" title="class in p1">B</a>)</div>
+                    <div class="col-first odd-row-color"><a href="p2/A.html" title="interface in p2">A</a></div>
+                    <div class="col-last odd-row-color">&nbsp;<br>(<span class="implementation-label">Implementation(s):</span>&nbsp;<a href="p2/B.html" title="class in p2">B</a>)</div>
+                    </div>
                     """);
 
     }
@@ -378,24 +338,15 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("m/module-summary.html", true,
                 """
-                    <div class="provides-summary">
-                    <table class="details-table">
-                    <caption><span>Provides</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p1/A.html" title="interface in p1">A</a></th>
-                    <td class="col-last">
+                    <div class="caption"><span>Provides</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p1/A.html" title="interface in p1">A</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">abc</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    </div>
+                    </div>
                     """);
 
     }
@@ -430,43 +381,26 @@ public class TestModuleServices extends JavadocTester {
 
         checkOutput("m/module-summary.html", true,
                 """
-                    <div class="provides-summary">
-                    <table class="details-table">
-                    <caption><span>Provides</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p1/A.html" title="interface in p1">A</a></th>
-                    <td class="col-last">
+                    <div class="caption"><span>Provides</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p1/A.html" title="interface in p1">A</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">abc</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>""",
+                    </div>
+                    </div>
+                    """,
                 """
-                    <div class="uses-summary">
-                    <table class="details-table">
-                    <caption><span>Uses</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="p2/B.html" title="class in p2">B</a></th>
-                    <td class="col-last">
+                    <div class="caption"><span>Uses</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="p2/B.html" title="class in p2">B</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">def</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    </div>
+                    </div>
                     """);
 
     }

test/langtools/jdk/javadoc/doclet/testModules/TestModules.java

@@ -27,7 +27,7 @@
  *      8168766 8168688 8162674 8160196 8175799 8174974 8176778 8177562 8175218
  *      8175823 8166306 8178043 8181622 8183511 8169819 8074407 8183037 8191464
  *      8164407 8192007 8182765 8196200 8196201 8196202 8196202 8205593 8202462
- *      8184205 8219060 8223378 8234746 8239804 8239816
+ *      8184205 8219060 8223378 8234746 8239804 8239816 8253117
  * @summary Test modules support in javadoc.
  * @library ../../lib
  * @modules jdk.javadoc/jdk.javadoc.internal.tool
@@ -544,20 +544,19 @@ public class TestModules extends JavadocTester {
                     <div class="flex-content">
                     <main role="main">
                     <div class="block">The overview summary page header.</div>
-                    <div class="overview-summary" id="all-modules-table">
-                    <table class="summary-table">
-                    <caption><span>Modules</span></caption>""");
+                    <div id="all-modules-table">
+                    <div class="caption"><span>Modules</span></div>
+                    <div class="summary-table two-column-summary">""");
         checkOutput("index.html", false,
                 """
-                    </table>
                     </div>
                     </main>
                     <main role="main">
                     <div class="block">The overview summary page header.</div>
                     </div>
-                    <div class="overview-summary" id="all-modules-table">
-                    <table class="summary-table">
-                    <caption><span>Modules</span><</caption>""");
+                    <div id="all-modules-table">
+                    <div class="caption"><span>Modules</span></div>
+                    <div class="summary-table two-column-summary">""");
     }
 
     void checkHtml5NoDescription(boolean found) {
@@ -666,94 +665,23 @@ public class TestModules extends JavadocTester {
                     <dd>Just a simple module tag.</dd>""");
     }
 
-    void checkOverviewSummaryModules() {
-        checkOutput("index.html", true,
-                """
-                    <div class="overview-summary">
-                    <table summary="Module Summary table, listing modules, and an explanation">
-                    <caption><span>Modules</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Module</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
-        checkOutput("overview-summary.html", false,
-                """
-                    <div class="overview-summary">
-                    <table summary="Package Summary table, listing packages, and an explanation">
-                    <caption><span>Packages</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
-    }
-
-    void checkOverviewSummaryPackages() {
-        checkOutput("index.html", false,
-                """
-                    <div class="overview-summary">
-                    <table summary="Module Summary table, listing modules, and an explanation">
-                    <caption><span>Modules</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Module</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""",
-                """
-                    </table>
-                    </div>
-                    <div class="block">The overview summary page header.</div>
-                    </div>
-                    <div class="overview-summary">
-                    <table summary="Package Summary table, listing packages, and an explanation">
-                    <caption><span>Packages</span></caption>""");
-        checkOutput("index.html", true,
-                """
-                    <div class="overview-summary">
-                    <table summary="Package Summary table, listing packages, and an explanation">
-                    <caption><span>Packages</span></caption>
-                    <thead>n<tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    """,
-                """
-                    </script>
-                    <div class="block">The overview summary page header.</div>
-                    </div>
-                    <div class="overview-summary">
-                    <table summary="Package Summary table, listing packages, and an explanation">
-                    <caption><span>Packages</span></caption>""");
-    }
-
     void checkHtml5OverviewSummaryModules() {
         checkOutput("index.html", true,
                 """
-                    <div class="overview-summary" id="all-modules-table">
-                    <table class="summary-table">
-                    <caption><span>Modules</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Module</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
+                    <div id="all-modules-table">
+                    <div class="caption"><span>Modules</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Module</div>
+                    <div class="table-header col-last">Description</div>
+                    """);
         checkOutput("overview-summary.html", false,
                 """
-                    <div class="overview-summary" id="all-modules-table">
-                    <table class="summary-table">
-                    <caption><span>Packages</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
+                    <div id="all-modules-table">
+                    <div class="caption"><span>Packages</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
+                    """);
     }
 
     void checkHtml5OverviewSummaryPackages() {
@@ -762,12 +690,12 @@ public class TestModules extends JavadocTester {
                     <div class="overview-summary" id="all-modules-table">
                     <table class="summary-table">
                     <caption><span>Modules</span></caption>
-                    <thead>
+                    <table-header>
                     <tr>
                     <th class="col-first" scope="col">Module</th>
                     <th class="col-last" scope="col">Description</th>
                     </tr>
-                    </thead>""",
+                    </table-header>""",
                 """
                     </table>
                     </div>
@@ -783,24 +711,20 @@ public class TestModules extends JavadocTester {
                     <caption><span>Packages</span></caption>""");
         checkOutput("index.html", true,
                 """
-                    <div class="overview-summary" id="all-packages-table">
-                    <table class="summary-table">
-                    <caption><span>Packages</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""",
+                    <div id="all-packages-table">
+                    <div class="caption"><span>Packages</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
                     </nav>
                     </header>
                     <div class="flex-content">
                     <main role="main">
                     <div class="block">The overview summary page header.</div>
-                    <div class="overview-summary" id="all-packages-table">
-                    <table class="summary-table">
-                    <caption><span>Packages</span></caption>""");
+                    <div id="all-packages-table">
+                    <div class="caption"><span>Packages</span></div>
+                    <div class="summary-table two-column-summary">""");
     }
 
     void checkModuleSummary() {
@@ -818,22 +742,19 @@ public class TestModules extends JavadocTester {
                     <!-- ============ MODULES SUMMARY =========== -->
                     <h2>Modules</h2>""",
                 """
-                    <tr class="alt-color" id="i0">
-                    <th class="col-first" scope="row"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>""",
+                    <div class="col-first even-row-color package-summary-table-tab1 package-summary-table"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></div>
+                    <div class="col-last even-row-color package-summary-table-tab1 package-summary-table">&nbsp;</div>""",
                 """
                     <section class="packages-summary" id="packages.summary">
                     <!-- ============ PACKAGES SUMMARY =========== -->
                     <h2>Packages</h2>""",
                 """
-                    <tr class="alt-color">
-                    <td class="col-first">transitive</td>
-                    <th class="col-second" scope="row"><a href="../moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color">transitive</div>
+                    <div class="col-second even-row-color"><a href="../moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">This is a test description for the moduleB module.</div>
-                    </td>
-                    </tr>""");
+                    </div>
+                    """);
         checkOutput("moduleB/module-summary.html", true,
                 """
                     <li><a href="#module.description">Description</a>&nbsp;|&nbsp;</li>
@@ -844,10 +765,9 @@ public class TestModules extends JavadocTester {
                     <!-- ============ PACKAGES SUMMARY =========== -->
                     <h2>Packages</h2>""",
                 """
-                    <tr class="alt-color" id="i0">
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>""",
+                    <div class="col-first even-row-color package-summary-table package-summary-table-tab2"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
+                    <div class="col-last even-row-color package-summary-table package-summary-table-tab2">&nbsp;</div>
+                    </div>""",
                 """
                     <!-- ============ PACKAGES SUMMARY =========== -->
                     <h2>Packages</h2>""",
@@ -855,37 +775,25 @@ public class TestModules extends JavadocTester {
                     <!-- ============ SERVICES SUMMARY =========== -->
                     <h2>Services</h2>""",
                 """
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/TestClassInModuleB.html" \
-                    title="class in testpkgmdlB">TestClassInModuleB</a></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color"><a href="testpkgmdlB/TestClassInModuleB.html" title="class in testpkgmdlB">TestClassInModuleB</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">With a test description for uses.</div>
-                    </td>
-                    </tr>""",
+                    </div>""",
                 """
-                    <caption><span>Opens</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""",
+                    <div class="caption"><span>Opens</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <caption><span>Uses</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""",
+                    <div class="caption"><span>Uses</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <caption><span>Provides</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Type</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
+                    <div class="caption"><span>Provides</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">Type</div>
+                    <div class="table-header col-last">Description</div>""");
     }
 
     void checkAggregatorModuleSummary() {
@@ -899,22 +807,16 @@ public class TestModules extends JavadocTester {
                     ase <span id="searchphrase" class="search-tag-result">search phrase</span>. Make\
                      sure there are no exported packages.</div>""",
                 """
-                    <tbody>
-                    <tr class="alt-color">
-                    <td class="col-first">transitive</td>
-                    <th class="col-second" scope="row"><a href="../moduleA/module-summary.html">moduleA</a></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color">transitive</div>
+                    <div class="col-second even-row-color"><a href="../moduleA/module-summary.html">moduleA</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <td class="col-first">transitive</td>
-                    <th class="col-second" scope="row"><a href="../moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last">
+                    </div>
+                    <div class="col-first odd-row-color">transitive</div>
+                    <div class="col-second odd-row-color"><a href="../moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last odd-row-color">
                     <div class="block">This is a test description for the moduleB module.</div>
-                    </td>
-                    </tr>
-                    </tbody>""");
+                    </div>""");
     }
 
     void checkNegatedModuleSummary() {
@@ -983,25 +885,21 @@ public class TestModules extends JavadocTester {
     void checkModuleModeCommon() {
         checkOutput("index.html", true,
                 """
-                    <th class="col-first" scope="row"><a href="moduleA/module-summary.html">moduleA</a></th>
-                    <td class="col-last">
-                    <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>
-                    </td>""",
+                    <div class="col-first even-row-color all-modules-table-tab1 all-modules-table"><a href="moduleA/module-summary.html">moduleA</a></div>
+                    <div class="col-last even-row-color all-modules-table-tab1 all-modules-table">
+                    <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>""",
                 """
-                    <th class="col-first" scope="row"><a href="moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last">
-                    <div class="block">This is a test description for the moduleB module.</div>
-                    </td>""",
+                    <div class="col-first odd-row-color all-modules-table-tab1 all-modules-table"><a href="moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last odd-row-color all-modules-table-tab1 all-modules-table">
+                    <div class="block">This is a test description for the moduleB module.</div>""",
                 """
-                    <th class="col-first" scope="row"><a href="moduletags/module-summary.html">moduletags</a></th>
-                    <td class="col-last">
+                    <div class="col-first odd-row-color all-modules-table-tab1 all-modules-table"><a href="moduletags/module-summary.html">moduletags</a></div>
+                    <div class="col-last odd-row-color all-modules-table-tab1 all-modules-table">
                     <div class="block">This is a test description for the moduletags module.<br>
-                     Type Link: <a href="moduletags/testpkgmdltags/TestClassInModuleTags.html" title\
-                    ="class in testpkgmdltags"><code>TestClassInModuleTags</code></a>.<br>
-                     Member Link: <a href="moduletags/testpkgmdltags/TestClassInModuleTags.html#test\
-                    Method(java.lang.String)"><code>testMethod(String)</code></a>.<br>
+                     Type Link: <a href="moduletags/testpkgmdltags/TestClassInModuleTags.html" title="class in testpkgmdltags"><code>TestClassInModuleTags</code></a>.<br>
+                     Member Link: <a href="moduletags/testpkgmdltags/TestClassInModuleTags.html#testMethod(java.lang.String)"><code>testMethod(String)</code></a>.<br>
                      Package Link: <a href="moduletags/testpkgmdltags/package-summary.html"><code>testpkgmdltags</code></a>.<br></div>
-                    </td>""");
+                    </div>""");
         checkOutput("moduleA/module-summary.html", true,
                 """
                     <li><a href="#module.description">Description</a>&nbsp;|&nbsp;</li>
@@ -1009,82 +907,58 @@ public class TestModules extends JavadocTester {
                     <li><a href="#packages.summary">Packages</a>&nbsp;|&nbsp;</li>
                     <li>Services</li>""",
                 """
-                    <th class="col-first" scope="row"><a href="../moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last"><a href="../moduleB/testpkgmdlB/package-summary.html">testpkgmdlB</a></td>
-                    """);
-        checkOutput("moduleB/module-summary.html", true,
-                """
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/TestClassInModuleB.html" \
-                    title="class in testpkgmdlB">TestClassInModuleB</a></th>
-                    <td class="col-last">
-                    <div class="block">With a test description for uses.</div>
-                    </td>
+                    <div class="col-first even-row-color"><a href="../moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last even-row-color"><a href="../moduleB/testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
                     """);
         checkOutput("moduletags/module-summary.html", true,
+                """
+                    <div class="col-first even-row-color package-summary-table-tab1 package-summary-table"><a href="testpkgmdltags/package-summary.html">testpkgmdltags</a></div>
+                    <div class="col-last even-row-color package-summary-table-tab1 package-summary-table">&nbsp;</div>""",
                 """
                     <li><a href="#module.description">Description</a>&nbsp;|&nbsp;</li>
                     <li><a href="#modules.summary">Modules</a>&nbsp;|&nbsp;</li>
                     <li><a href="#packages.summary">Packages</a>&nbsp;|&nbsp;</li>
                     <li>Services</li>""",
                 """
-                    <div class="requires-summary">
-                    <table class="details-table">
-                    <caption><span>Indirect Requires</span></caption>""",
+                    <div class="caption"><span>Indirect Requires</span></div>
+                    <div class="details-table three-column-summary">""",
                 """
-                    <td class="col-first">transitive</td>
-                    <th class="col-second" scope="row"><a href="../moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color">transitive</div>
+                    <div class="col-second even-row-color"><a href="../moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">This is a test description for the moduleB module.</div>
-                    </td>""",
+                    </div>""",
                 """
-                    <div class="packages-summary">
-                    <table class="details-table">
-                    <caption><span>Indirect Exports</span></caption>""",
+                    <div class="caption"><span>Indirect Exports</span></div>
+                    <div class="details-table two-column-summary">""",
                 """
-                    <td class="col-first">transitive static</td>
-                    <th class="col-second" scope="row"><a href="../moduleA/module-summary.html">moduleA</a></th>
-                    <td class="col-last">
-                    <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>
-                    </td>""",
+                    <div class="caption"><span>Requires</span></div>
+                    <div class="details-table three-column-summary">
+                    <div class="table-header col-first">Modifier</div>
+                    <div class="table-header col-second">Module</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <div class="requires-summary">
-                    <table class="details-table">
-                    <caption><span>Requires</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Modifier</th>
-                    <th class="col-second" scope="col">Module</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="caption"><span>Indirect Requires</span></div>
+                    <div class="details-table three-column-summary">
+                    <div class="table-header col-first">Modifier</div>
+                    <div class="table-header col-second">Module</div>
+                    <div class="table-header col-last">Description</div>""",
                 """
-                    <div class="requires-summary">
-                    <table class="details-table">
-                    <caption><span>Indirect Requires</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Modifier</th>
-                    <th class="col-second" scope="col">Module</th>
-                    <th class="col-last" scope="col">Description</th>""",
+                    <div class="caption"><span>Indirect Opens</span></div>
+                    <div class="details-table two-column-summary">
+                    <div class="table-header col-first">From</div>
+                    <div class="table-header col-last">Packages</div>""",
                 """
-                    <div class="packages-summary">
-                    <table class="details-table">
-                    <caption><span>Indirect Opens</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">From</th>
-                    <th class="col-last" scope="col">Packages</th>
-                    </tr>
-                    """,
-                """
-                    <th class="col-first" scope="row"><a href="../moduleB/module-summary.html">moduleB</a></th>
-                    <td class="col-last"><a href="../moduleB/testpkgmdlB/package-summary.html">testpkgmdlB</a></td>
+                    <div class="col-first even-row-color"><a href="../moduleB/module-summary.html">moduleB</a></div>
+                    <div class="col-last even-row-color"><a href="../moduleB/testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
                     """);
     }
 
     void checkModuleModeApi(boolean found) {
         checkOutput("moduleA/module-summary.html", found,
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></th>
-                    <td class="col-last">&nbsp;</td>""");
+                    <div class="col-first even-row-color package-summary-table-tab1 package-summary-table"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></div>
+                    <div class="col-last even-row-color package-summary-table-tab1 package-summary-table">&nbsp;</div>""");
         checkOutput("moduleB/module-summary.html", found,
                 """
                     <li><a href="#module.description">Description</a>&nbsp;|&nbsp;</li>
@@ -1092,64 +966,69 @@ public class TestModules extends JavadocTester {
                     <li><a href="#packages.summary">Packages</a>&nbsp;|&nbsp;</li>
                     <li><a href="#services.summary">Services</a></li>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></th>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first even-row-color package-summary-table package-summary-table-tab2"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
+                    <div class="col-last even-row-color package-summary-table package-summary-table-tab2">&nbsp;</div>""",
                 """
-                    <div class="packages-summary" id="package-summary-table">
-                    <table class="summary-table">
-                    <caption><span>Opens</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color" id="i0">
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    </tbody>
-                    </table>""");
-        checkOutput("moduletags/module-summary.html", true,
+                    <div id="package-summary-table">
+                    <div class="caption"><span>Opens</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color package-summary-table package-summary-table-tab2"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
+                    <div class="col-last even-row-color package-summary-table package-summary-table-tab2">&nbsp;</div>
+                    </div>
+                    </div>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdltags/package-summary.html">testpkgmdltags</a></th>
-                    <td class="col-last">&nbsp;</td>""");
+                    <div class="col-first even-row-color"><a href="testpkgmdlB/TestClassInModuleB.html" title="class in testpkgmdlB">TestClassInModuleB</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="block">With a test description for uses.</div>
+                    """);
+        checkOutput("moduletags/module-summary.html", found,
+                """
+                    <div class="col-first even-row-color">transitive static</div>
+                    <div class="col-second even-row-color"><a href="../moduleA/module-summary.html">moduleA</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>""");
     }
 
     void checkModuleModeAll(boolean found) {
         checkOutput("moduleA/module-summary.html", found,
                 """
-                    <td class="col-first"> </td>
-                    <th class="col-second" scope="row">java.base</th>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first even-row-color"> </div>
+                    <div class="col-second even-row-color">java.base</div>
+                    <div class="col-last even-row-color">&nbsp;</div>""",
                 """
-                    <td class="col-first"> </td>
-                    <th class="col-second" scope="row"><a href="../moduleC/module-summary.html">moduleC</a></th>
-                    <td class="col-last">
+                    <div class="col-first even-row-color"> </div>
+                    <div class="col-second even-row-color"><a href="../moduleC/module-summary.html">moduleC</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">This is a test description for the moduleC module.</div>
-                    </td>""",
+                    </div>""",
                 """
-                    <th class="col-first" scope="row"><a href="../moduleC/module-summary.html">moduleC</a></th>
-                    <td class="col-last"><a href="../moduleC/testpkgmdlC/package-summary.html">testpkgmdlC</a></td>""",
+                    <div class="col-first even-row-color"><a href="../moduleC/module-summary.html">moduleC</a></div>
+                    <div class="col-last even-row-color"><a href="../moduleC/testpkgmdlC/package-summary.html">testpkgmdlC</a></div>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></th>
-                    <td class="col-second">All Modules</td>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first odd-row-color package-summary-table-tab1 package-summary-table"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></div>
+                    <div class="col-second odd-row-color package-summary-table-tab1 package-summary-table">All Modules</div>
+                    <div class="col-last odd-row-color package-summary-table-tab1 package-summary-table">&nbsp;</div>""",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="package-summary-table.tabpanel" tabi\
-                    ndex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Packa\
-                    ges</button><button role="tab" aria-selected="false" aria-controls="package-summ\
-                    ary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="ta\
-                    ble-tab" onclick="show(1);">Exports</button><button role="tab" aria-selected="fa\
-                    lse" aria-controls="package-summary-table.tabpanel" tabindex="-1" onkeydown="swi\
-                    tchTab(event)" id="t3" class="table-tab" onclick="show(4);">Concealed</button></\
-                    div>""",
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="package-summary-table-tab0" role="tab" aria-selected="true" aria-con\
+                    trols="package-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)"\
+                     onclick="show('package-summary-table', 'package-summary-table', 3)" class="acti\
+                    ve-table-tab">All Packages</button>\
+                    <button id="package-summary-table-tab1" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab1', 3)" clas\
+                    s="table-tab">Exports</button>\
+                    <button id="package-summary-table-tab3" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab3', 3)" clas\
+                    s="table-tab">Concealed</button>\
+                    </div>""",
                 """
-                    <th class="col-first" scope="row"><a href="concealedpkgmdlA/package-summary.html">concealedpkgmdlA</a></th>
-                    <td class="col-second">None</td>
-                    <td class="col-last">&nbsp;</td>""");
+                    <div class="col-first even-row-color package-summary-table-tab3 package-summary-table"><a href="concealedpkgmdlA/package-summary.html">concealedpkgmdlA</a></div>
+                    <div class="col-second even-row-color package-summary-table-tab3 package-summary-table">None</div>
+                    <div class="col-last even-row-color package-summary-table-tab3 package-summary-table">&nbsp;</div>""");
         checkOutput("moduleB/module-summary.html", found,
                 """
                     <li><a href="#module.description">Description</a>&nbsp;|&nbsp;</li>
@@ -1157,53 +1036,63 @@ public class TestModules extends JavadocTester {
                     <li><a href="#packages.summary">Packages</a>&nbsp;|&nbsp;</li>
                     <li><a href="#services.summary">Services</a></li>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></th>
-                    <td class="col-second">None</td>
-                    <td class="col-second">All Modules</td>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first even-row-color package-summary-table package-summary-table-tab2"><a href="testpkgmdlB/package-summary.html">testpkgmdlB</a></div>
+                    <div class="col-second even-row-color package-summary-table package-summary-table-tab2">None</div>
+                    <div class="col-second even-row-color package-summary-table package-summary-table-tab2">All Modules</div>
+                    <div class="col-last even-row-color package-summary-table package-summary-table-tab2">&nbsp;</div>""",
                 """
-                    <td class="col-first"> </td>
-                    <th class="col-second" scope="row">java.base</th>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first even-row-color"> </div>
+                    <div class="col-second even-row-color">java.base</div>
+                    <div class="col-last even-row-color">&nbsp;</div>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdlB/TestClass2InModuleB.html"\
-                     title="class in testpkgmdlB">TestClass2InModuleB</a></th>
-                    <td class="col-last">&nbsp;</td>""",
+                    <div class="col-first even-row-color"><a href="testpkgmdlB/TestClass2InModuleB.html"\
+                     title="class in testpkgmdlB">TestClass2InModuleB</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkg2mdlB/TestInterface2InModuleB.\
-                    html" title="interface in testpkg2mdlB">TestInterface2InModuleB</a></th>
-                    <td class="col-last">&nbsp;<br>(<span class="implementation-label">Implementatio\
-                    n(s):</span>&nbsp;<a href="testpkgmdlB/TestClass2InModuleB.html" title="class in\
-                     testpkgmdlB">TestClass2InModuleB</a>)</td>""",
+                    <div class="col-first even-row-color"><a href="testpkg2mdlB/TestInterface2InModuleB.h\
+                    tml" title="interface in testpkg2mdlB">TestInterface2InModuleB</a></div>
+                    <div class="col-last even-row-color">&nbsp;<br>(<span class="implementation-label">Im\
+                    plementation(s):</span>&nbsp;<a href="testpkgmdlB/TestClass2InModuleB.html" titl\
+                    e="class in testpkgmdlB">TestClass2InModuleB</a>)</div>""",
                 """
-                    <th class="col-first" scope="row"><a href="testpkg2mdlB/TestInterfaceInModuleB.h\
-                    tml" title="interface in testpkg2mdlB">TestInterfaceInModuleB</a></th>
-                    <td class="col-last">&nbsp;<br>(<span class="implementation-label">Implementatio\
-                    n(s):</span>&nbsp;<a href="testpkgmdlB/TestClassInModuleB.html" title="class in \
-                    testpkgmdlB">TestClassInModuleB</a>)</td>""",
+                    <div class="col-first odd-row-color"><a href="testpkg2mdlB/TestInterfaceInModuleB.ht\
+                    ml" title="interface in testpkg2mdlB">TestInterfaceInModuleB</a></div>
+                    <div class="col-last odd-row-color">&nbsp;<br>(<span class="implementation-label">Im\
+                    plementation(s):</span>&nbsp;<a href="testpkgmdlB/TestClassInModuleB.html" title\
+                    ="class in testpkgmdlB">TestClassInModuleB</a>)</div>""",
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="package-summary-table.tabpanel" tabi\
-                    ndex="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Packa\
-                    ges</button><button role="tab" aria-selected="false" aria-controls="package-summ\
-                    ary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="ta\
-                    ble-tab" onclick="show(1);">Exports</button><button role="tab" aria-selected="fa\
-                    lse" aria-controls="package-summary-table.tabpanel" tabindex="-1" onkeydown="swi\
-                    tchTab(event)" id="t2" class="table-tab" onclick="show(2);">Opens</button></div>""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="package-summary-table-tab0" role="tab" aria-selected="true" aria-con\
+                    trols="package-summary-table.tabpanel" tabindex="0" onkeydown="switchTab(event)"\
+                     onclick="show('package-summary-table', 'package-summary-table', 4)" class="acti\
+                    ve-table-tab">All Packages</button>\
+                    <button id="package-summary-table-tab1" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab1', 4)" clas\
+                    s="table-tab">Exports</button>\
+                    <button id="package-summary-table-tab2" role="tab" aria-selected="false" aria-co\
+                    ntrols="package-summary-table.tabpanel" tabindex="-1" onkeydown="switchTab(event\
+                    )" onclick="show('package-summary-table', 'package-summary-table-tab2', 4)" clas\
+                    s="table-tab">Opens</button>\
+                    </div>""",
+                """
+                    <div class="col-first odd-row-color"><a href="testpkgmdlB/TestClassInModuleB.html" title="class in testpkgmdlB">TestClassInModuleB</a></div>
+                    <div class="col-last odd-row-color">
+                    <div class="block">With a test description for uses.</div>
+                    """);
         checkOutput("moduleC/module-summary.html", found,
                 """
-                    <caption><span>Exports</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-second" scope="col">Exported To Modules</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
-        checkOutput("moduletags/module-summary.html", true,
+                    <div class="caption"><span>Exports</span></div>
+                    <div class="summary-table three-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-second">Exported To Modules</div>
+                    <div class="table-header col-last">Description</div>""");
+        checkOutput("moduletags/module-summary.html", found,
                 """
-                    <th class="col-first" scope="row"><a href="testpkgmdltags/package-summary.html">testpkgmdltags</a></th>
-                    <td class="col-last">&nbsp;</td>""");
+                    <div class="col-first odd-row-color">transitive static</div>
+                    <div class="col-second odd-row-color"><a href="../moduleA/module-summary.html">moduleA</a></div>
+                    <div class="col-last odd-row-color">
+                    <div class="block">This is a test description for the moduleA module with a Search phrase search phrase.</div>""");
     }
 
     void checkModuleDeprecation(boolean found) {
@@ -1220,12 +1109,9 @@ public class TestModules extends JavadocTester {
                     <li><a href="#module">Modules</a></li>
                     </ul>""",
                 """
-                    <tr class="alt-color">
-                    <th class="col-deprecated-item-name" scope="row"><a href="moduleA/module-summary.html">moduleA</a></th>
-                    <td class="col-last">
-                    <div class="deprecation-comment">This module is deprecated.</div>
-                    </td>
-                    </tr>""");
+                    <div class="col-deprecated-item-name even-row-color"><a href="moduleA/module-summary.html">moduleA</a></div>
+                    <div class="col-last even-row-color">
+                    <div class="deprecation-comment">This module is deprecated.</div>""");
         checkOutput("moduleB/module-summary.html", !found,
                 """
                     <div class="deprecation-block"><span class="deprecated-label">Deprecated.</span>
@@ -1256,32 +1142,36 @@ public class TestModules extends JavadocTester {
                 """
                     <!-- ============ PACKAGES SUMMARY =========== -->
                     <h2>Packages</h2>""",
-                "<caption><span>Concealed</span></caption>");
+                "<div class=\"caption\"><span>Concealed</span></div>");
     }
 
     void checkGroupOption() {
         checkOutput("index.html", true,
                 """
-                    <div class="overview-summary" id="all-modules-table">
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-modules-table.tabpanel" tabindex\
-                    ="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Modules</\
-                    button><button role="tab" aria-selected="false" aria-controls="all-modules-table\
-                    .tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" \
-                    onclick="show(1);">Module Group A</button><button role="tab" aria-selected="fals\
-                    e" aria-controls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab\
-                    (event)" id="t2" class="table-tab" onclick="show(2);">Module Group B &amp; C</bu\
-                    tton><button role="tab" aria-selected="false" aria-controls="all-modules-table.t\
-                    abpanel" tabindex="-1" onkeydown="switchTab(event)" id="t4" class="table-tab" on\
-                    click="show(4);">Other Modules</button></div>
+                    <div id="all-modules-table">
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-modules-table-tab0" role="tab" aria-selected="true" aria-control\
+                    s="all-modules-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" onclick\
+                    ="show('all-modules-table', 'all-modules-table', 2)" class="active-table-tab">Al\
+                    l Modules</button>\
+                    <button id="all-modules-table-tab1" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab1', 2)" class="table-tab">Mo\
+                    dule Group A</button>\
+                    <button id="all-modules-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab2', 2)" class="table-tab">Mo\
+                    dule Group B &amp; C</button>\
+                    <button id="all-modules-table-tab3" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab3', 2)" class="table-tab">Ot\
+                    her Modules</button>\
+                    </div>
                     <div id="all-modules-table.tabpanel" role="tabpanel">
-                    <table class="summary-table" aria-labelledby="t0">""",
+                    <div class="summary-table two-column-summary" aria-labelledby="all-modules-table-tab0">""",
                 """
-                    var data = {"i0":1,"i1":2,"i2":2,"i3":4};
-                    var tabs = {65535:["t0","All Modules"],1:["t1","Module Group A"],2:["t2","Module\
-                     Group B & C"],4:["t4","Other Modules"]};
-                    var altColor = "alt-color";
-                    var rowColor = "row-color";
+                    var evenRowColor = "even-row-color";
+                    var oddRowColor = "odd-row-color";
                     var tableTab = "table-tab";
                     var activeTableTab = "active-table-tab";""");
         checkOutput("index.html", false,
@@ -1295,37 +1185,52 @@ public class TestModules extends JavadocTester {
     void checkGroupOptionOrdering() {
         checkOutput("index.html", true,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-modules-table.tabpanel" tabindex\
-                    ="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Modules</\
-                    button><button role="tab" aria-selected="false" aria-controls="all-modules-table\
-                    .tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" \
-                    onclick="show(1);">B Group</button><button role="tab" aria-selected="false" aria\
-                    -controls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)\
-                    " id="t2" class="table-tab" onclick="show(2);">C Group</button><button role="tab\
-                    " aria-selected="false" aria-controls="all-modules-table.tabpanel" tabindex="-1"\
-                     onkeydown="switchTab(event)" id="t4" class="table-tab" onclick="show(4);">A Gro\
-                    up</button><button role="tab" aria-selected="false" aria-controls="all-modules-t\
-                    able.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t8" class="table-t\
-                    ab" onclick="show(8);">Other Modules</button></div>""",
-                """
-                    var tabs = {65535:["t0","All Modules"],1:["t1","B Group"],2:["t2","C Group"],4:[\
-                    "t4","A Group"],8:["t8","Other Modules"]};""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-modules-table-tab0" role="tab" aria-selected="true" aria-control\
+                    s="all-modules-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" onclick\
+                    ="show('all-modules-table', 'all-modules-table', 2)" class="active-table-tab">Al\
+                    l Modules</button>\
+                    <button id="all-modules-table-tab1" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab1', 2)" class="table-tab">B\
+                     Group</button>\
+                    <button id="all-modules-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab2', 2)" class="table-tab">C\
+                     Group</button>\
+                    <button id="all-modules-table-tab3" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab3', 2)" class="table-tab">A\
+                     Group</button>\
+                    <button id="all-modules-table-tab4" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab4', 2)" class="table-tab">Ot\
+                    her Modules</button>\
+                    </div>""");
         checkOutput("index.html", false,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-modules-table.tabpanel" tabindex\
-                    ="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Modules</\
-                    button><button role="tab" aria-selected="false" aria-controls="all-modules-table\
-                    .tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" \
-                    onclick="show(1);">A Group</button><button role="tab" aria-selected="false" aria\
-                    -controls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)\
-                    " id="t2" class="table-tab" onclick="show(2);">B Group</button><button role="tab\
-                    " aria-selected="false" aria-controls="all-modules-table.tabpanel" tabindex="-1"\
-                     onkeydown="switchTab(event)" id="t4" class="table-tab" onclick="show(4);">C Gro\
-                    up</button><button role="tab" aria-selected="false" aria-controls="all-modules-t\
-                    able.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t8" class="table-t\
-                    ab" onclick="show(8);">Other Modules</button></div>""",
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-modules-table-tab0" role="tab" aria-selected="true" aria-control\
+                    s="all-modules-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" onclick\
+                    ="show('all-modules-table', 'all-modules-table', 2)" class="active-table-tab">Al\
+                    l Modules</button>\
+                    <button id="all-modules-table-tab1" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab1', 2)" class="table-tab">A\
+                     Group</button>\
+                    <button id="all-modules-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab2', 2)" class="table-tab">B\
+                     Group</button>\
+                    <button id="all-modules-table-tab3" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab3', 2)" class="table-tab">C\
+                     Group</button>\
+                    <button id="all-modules-table-tab4" role="tab" aria-selected="false" aria-contro\
+                    ls="all-modules-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-modules-table', 'all-modules-table-tab4', 2)" class="table-tab">Ot\
+                    her Modules</button>\
+                    </div>""",
                 "Java SE Modules");
     }
 
@@ -1333,23 +1238,26 @@ public class TestModules extends JavadocTester {
         checkOutput("index.html", true,
                 """
                     <div class="block">The overview summary page header.</div>
-                    <div class="overview-summary" id="all-packages-table">
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-packages-table.tabpanel" tabinde\
-                    x="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Packages\
-                    </button><button role="tab" aria-selected="false" aria-controls="all-packages-ta\
-                    ble.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-ta\
-                    b" onclick="show(1);">Package Group 0</button><button role="tab" aria-selected="\
-                    false" aria-controls="all-packages-table.tabpanel" tabindex="-1" onkeydown="swit\
-                    chTab(event)" id="t2" class="table-tab" onclick="show(2);">Package Group 1</butt\
-                    on></div>
+                    <div id="all-packages-table">
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-packages-table-tab0" role="tab" aria-selected="true" aria-contro\
+                    ls="all-packages-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-packages-table', 'all-packages-table', 2)" class="active-table-tab\
+                    ">All Packages</button>\
+                    <button id="all-packages-table-tab1" role="tab" aria-selected="false" aria-contro\
+                    ls="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-packages-table', 'all-packages-table-tab1', 2)" class="table-tab">P\
+                    ackage Group 0</button>\
+                    <button id="all-packages-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-packages-table', 'all-packages-table-tab2', 2)" class="table-tab">P\
+                    ackage Group 1</button>\
+                    </div>
                     <div id="all-packages-table.tabpanel" role="tabpanel">
-                    <table class="summary-table" aria-labelledby="t0">""",
+                    <div class="summary-table two-column-summary" aria-labelledby="all-packages-table-tab0">""",
                 """
-                    var data = {"i0":1,"i1":2};
-                    var tabs = {65535:["t0","All Packages"],1:["t1","Package Group 0"],2:["t2","Package Group 1"]};
-                    var altColor = "alt-color";
-                    var rowColor = "row-color";
+                    var evenRowColor = "even-row-color";
+                    var oddRowColor = "odd-row-color";
                     var tableTab = "table-tab";
                     var activeTableTab = "active-table-tab";""");
     }
@@ -1357,16 +1265,20 @@ public class TestModules extends JavadocTester {
     void checkGroupOptionPackageOrdering() {
         checkOutput("index.html", true,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-packages-table.tabpanel" tabinde\
-                    x="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Packages\
-                    </button><button role="tab" aria-selected="false" aria-controls="all-packages-ta\
-                    ble.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-ta\
-                    b" onclick="show(1);">Z Group</button><button role="tab" aria-selected="false" a\
-                    ria-controls="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(ev\
-                    ent)" id="t2" class="table-tab" onclick="show(2);">A Group</button></div>""",
-                """
-                    var tabs = {65535:["t0","All Packages"],1:["t1","Z Group"],2:["t2","A Group"]};""");
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-packages-table-tab0" role="tab" aria-selected="true" aria-contro\
+                    ls="all-packages-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-packages-table', 'all-packages-table', 2)" class="active-table-tab\
+                    ">All Packages</button>\
+                    <button id="all-packages-table-tab1" role="tab" aria-selected="false" aria-contr\
+                    ols="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" onc\
+                    lick="show('all-packages-table', 'all-packages-table-tab1', 2)" class="table-tab\
+                    ">Z Group</button>\
+                    <button id="all-packages-table-tab2" role="tab" aria-selected="false" aria-contr\
+                    ols="all-packages-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" onc\
+                    lick="show('all-packages-table', 'all-packages-table-tab2', 2)" class="table-tab\
+                    ">A Group</button>\
+                    </div>""");
     }
 
     void checkGroupOptionSingleModule() {
@@ -1422,21 +1334,17 @@ public class TestModules extends JavadocTester {
     void checkLinkSource(boolean includePrivate) {
         checkOutput("moduleA/module-summary.html", !includePrivate,
                 """
-                    <table class="summary-table">
-                    <caption><span>Exports</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color" id="i0">
-                    <th class="col-first" scope="row"><a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    </tbody>
-                    </table>""");
+                    div id="package-summary-table">
+                    <div class="caption"><span>Exports</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color package-summary-table-tab1 package-summary-table">\
+                    <a href="testpkgmdlA/package-summary.html">testpkgmdlA</a></div>
+                    <div class="col-last even-row-color package-summary-table-tab1 package-summary-table">&nbsp;</div>
+                    </div>
+                    </div>
+                    """);
         checkOutput("moduleA/testpkgmdlA/TestClassInModuleA.html", true,
                 """
                     <section class="description">
@@ -1470,41 +1378,40 @@ public class TestModules extends JavadocTester {
     void checkAllPkgsAllClasses(boolean found) {
         checkOutput("allclasses-index.html", true,
                 """
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-classes-table.tabpanel" tabindex\
-                    ="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Classes</\
-                    button><button role="tab" aria-selected="false" aria-controls="all-classes-table\
-                    .tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t2" class="table-tab" \
-                    onclick="show(2);">Class Summary</button><button role="tab" aria-selected="false\
-                    " aria-controls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(\
-                    event)" id="t6" class="table-tab" onclick="show(32);">Annotation Types Summary</\
-                    button></div>
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-classes-table-tab0" role="tab" aria-selected="true" aria-control\
+                    s="all-classes-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" onclick\
+                    ="show('all-classes-table', 'all-classes-table', 2)" class="active-table-tab">Al\
+                    l Classes</button>\
+                    <button id="all-classes-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab2', 2)" class="table-tab">Cl\
+                    ass Summary</button>\
+                    <button id="all-classes-table-tab6" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab6', 2)" class="table-tab">An\
+                    notation Types Summary</button>\
+                    </div>
                     """,
                 """
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>
                     """);
         checkOutput("allpackages-index.html", true,
                 """
-                    <caption><span>Package Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>""");
+                    <div class="caption"><span>Package Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
+                    """);
         checkOutput("allclasses-index.html", found,
                 """
-                    <table class="summary-table" aria-labelledby="t0">
+                    <div class="summary-table two-column-summary" aria-labelledby="all-classes-table-tab0">
                     """);
         checkOutput("allpackages-index.html", found,
                 """
-                    <div class="packages-summary">
-                    <table class="summary-table">
+                    <div class="caption"><span>Package Summary</span></div>
+                    <div class="summary-table two-column-summary">
                     """);
         checkOutput("allclasses-index.html", !found,
                 """

test/langtools/jdk/javadoc/doclet/testNewLanguageFeatures/TestNewLanguageFeatures.java

@@ -71,7 +71,7 @@ public class TestNewLanguageFeatures extends JavadocTester {
                     <pre>public enum <span class="type-name-label">Coin</span>
                     extends java.lang.Enum&lt;<a href="Coin.html" title="enum in pkg">Coin</a>&gt;</pre>""",
                 // Check for enum constant section
-                "<caption><span>Enum Constants</span></caption>",
+                "<div class=\"caption\"><span>Enum Constants</span></div>",
                 // Detail for enum constant
                 """
                     <span class="member-name-link"><a href="#Dime">Dime</a></span>""",
@@ -140,12 +140,15 @@ public class TestNewLanguageFeatures extends JavadocTester {
                      V&nbsp;param2)</span></div>""",
                 // Method that returns TypeParameters
                 """
-                    <td class="col-first"><code><a href="TypeParameters.html" title="type parameter in TypeParameters">E</a>[]</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#methodThatReturnsTypeParameterA(E%5B%5D)">methodThatReturnsTypeParameterA</a><\
-                    /span>&#8203;(<a href="TypeParameters.html" title="type parameter in TypeParamet\
-                    ers">E</a>[]&nbsp;e)</code>""",
-                """
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code><a href="TypeParameters.html" title="type parame\
+                    ter in TypeParameters">E</a>[]</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#method\
+                    ThatReturnsTypeParameterA(E%5B%5D)">methodThatReturnsTypeParameterA</a></span>&#\
+                    8203;(<a href="TypeParameters.html" title="type parameter in TypeParameters">E</\
+                    a>[]&nbsp;e)</code>""",
+                    """
                     <div class="member-signature"><span class="modifiers">public</span>&nbsp;<span c\
                     lass="return-type"><a href="TypeParameters.html" title="type parameter in TypePa\
                     rameters">E</a>[]</span>&nbsp;<span class="member-name">methodThatReturnsTypePar\
@@ -153,22 +156,26 @@ public class TestNewLanguageFeatures extends JavadocTester {
                     le="type parameter in TypeParameters">E</a>[]&nbsp;e)</span></div>
                     """,
                 """
-                    <td class="col-first"><code>&lt;T extends java.lang.Object &amp; java.lang.Compa\
-                    rable&lt;? super T&gt;&gt;<br>T</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#methodtThatReturnsTypeParametersB(java.util.Collection)">methodtThatReturnsTyp\
-                    eParametersB</a></span>&#8203;(java.util.Collection&lt;? extends T&gt;&nbsp;coll\
-                    )</code>""",
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>&lt;T extends java.lang.Object &amp; java.lang.C\
+                    omparable&lt;? super T&gt;&gt;<br>T</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#method\
+                    tThatReturnsTypeParametersB(java.util.Collection)">methodtThatReturnsTypeParamet\
+                    ersB</a></span>&#8203;(java.util.Collection&lt;? extends T&gt;&nbsp;coll)</code>""",
                 """
                     <div class="block">Returns TypeParameters</div>
                     """,
                 // Method takes a TypeVariable
                 """
-                    <td class="col-first"><code>&lt;X extends java.lang.Throwable&gt;<br><a href="Ty\
-                    peParameters.html" title="type parameter in TypeParameters">E</a></code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#orElseThrow(java.util.function.Supplier)">orElseThrow</a></span>&#8203;(java.u\
-                    til.function.Supplier&lt;? extends X&gt;&nbsp;exceptionSupplier)</code>"""
+                    <div class="col-first odd-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>&lt;X extends java.lang.Throwable&gt;<br><a href\
+                    ="TypeParameters.html" title="type parameter in TypeParameters">E</a></code></di\
+                    v>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#orElse\
+                    Throw(java.util.function.Supplier)">orElseThrow</a></span>&#8203;(java.util.func\
+                    tion.Supplier&lt;? extends X&gt;&nbsp;exceptionSupplier)</code>"""
                 );
 
         checkOutput("pkg/Wildcards.html", true,
@@ -234,211 +241,207 @@ public class TestNewLanguageFeatures extends JavadocTester {
         // ClassUseTest1: <T extends Foo & Foo2>
         checkOutput("pkg2/class-use/Foo.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo.html" title="class in pkg2">Foo</a></span></ca\
-                    ption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
+                    arameters of type <a href="../Foo.html" title="class in pkg2">Foo</a></span></\
+                    div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest1.html" title="class in pkg2">ClassUseTest1</a>&lt;T extends <a \
-                    href="../Foo.html" title="class in pkg2">Foo</a> &amp; <a href="../Foo2.html" ti\
-                    tle="interface in pkg2">Foo2</a>&gt;</span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest1.html" title="class in pkg2">ClassUseTest1</a>&lt;T extends <a\
+                     href="../Foo.html" title="class in pkg2">Foo</a> &amp; <a href="../Foo2.html"\
+                     title="interface in pkg2">Foo2</a>&gt;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo.html" title="class in pkg2">Foo</a></span></ca\
-                    ption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo.html" title="class in pkg2">Foo<\
+                    /a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest1.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest1.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>""",
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest1.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest1.html#metho\
+                    d(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>""",
                 """
-                    <caption><span>Fields in <a href="../package-summary.html">pkg2</a> with type pa\
-                    rameters of type <a href="../Foo.html" title="class in pkg2">Foo</a></span></cap\
-                    tion>""",
+                    <div class="caption"><span>Fields in <a href="../package-summary.html">pkg2</a>\
+                     with type parameters of type <a href="../Foo.html" title="class in pkg2">Foo</a\
+                    ></span></div>""",
                 """
-                    td class="col-first"><code><a href="../ParamTest.html" title="class in pkg2">Par\
-                    amTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&gt;</code></td\
-                    >"""
+                    <div class="col-first even-row-color"><code><a href="../ParamTest.html" title="class\
+                     in pkg2">ParamTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&g\
+                    t;</code></div>"""
         );
 
         checkOutput("pkg2/class-use/ParamTest.html", true,
                 """
-                    <caption><span>Fields in <a href="../package-summary.html">pkg2</a> declared as \
-                    <a href="../ParamTest.html" title="class in pkg2">ParamTest</a></span></caption>""",
+                    <div class="caption"><span>Fields in <a href="../package-summary.html">pkg2</a>\
+                     declared as <a href="../ParamTest.html" title="class in pkg2">ParamTest</a></s\
+                    pan></div>""",
                 """
-                    <td class="col-first"><code><a href="../ParamTest.html" title="class in pkg2">Pa\
-                    ramTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&gt;</code></t\
-                    d>"""
+                    <div class="col-first even-row-color"><code><a href="../ParamTest.html" title="class\
+                     in pkg2">ParamTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&\
+                    gt;</code></div>"""
         );
 
         checkOutput("pkg2/class-use/Foo2.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo2.html" title="interface in pkg2">Foo2</a></spa\
-                    n></caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo2.html" title="interface in pkg2"\
+                    >Foo2</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest1.html" title="class in pkg2">ClassUseTest1</a>&lt;T extends <a \
-                    href="../Foo.html" title="class in pkg2">Foo</a> &amp; <a href="../Foo2.html" ti\
-                    tle="interface in pkg2">Foo2</a>&gt;</span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest1.html" title="class in pkg2">ClassUseTest1</a>&lt;T extends <a\
+                     href="../Foo.html" title="class in pkg2">Foo</a> &amp; <a href="../Foo2.html"\
+                     title="interface in pkg2">Foo2</a>&gt;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo2.html" title="interface in pkg2">Foo2</a></spa\
-                    n></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo2.html" title="interface in pkg2"\
+                    >Foo2</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest1.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest1.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>"""
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest1.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest1.html#metho\
+                    d(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>"""
         );
 
         // ClassUseTest2: <T extends ParamTest<Foo3>>
         checkOutput("pkg2/class-use/ParamTest.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../ParamTest.html" title="class in pkg2">ParamTest</a\
-                    ></span></caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../ParamTest.html" title="class in pkg2\
+                    ">ParamTest</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest2.html" title="class in pkg2">ClassUseTest2</a>&lt;T extends <a \
-                    href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt;<a href="../Foo3\
-                    .html" title="class in pkg2">Foo3</a>&gt;&gt;</span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest2.html" title="class in pkg2">ClassUseTest2</a>&lt;T extends <a\
+                     href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt;<a href="../Fo\
+                    o3.html" title="class in pkg2">Foo3</a>&gt;&gt;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../ParamTest.html" title="class in pkg2">ParamTest</a\
-                    ></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../ParamTest.html" title="class in pkg2\
+                    ">ParamTest</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest2.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest2.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>""",
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest2.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest2.html#metho\
+                    d(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>""",
                 """
-                    <caption><span>Fields in <a href="../package-summary.html">pkg2</a> declared as \
-                    <a href="../ParamTest.html" title="class in pkg2">ParamTest</a></span></caption>""",
+                    <div class="caption"><span>Fields in <a href="../package-summary.html">pkg2</a>\
+                     declared as <a href="../ParamTest.html" title="class in pkg2">ParamTest</a></s\
+                    pan></div>""",
                 """
-                    <td class="col-first"><code><a href="../ParamTest.html" title="class in pkg2">Pa\
-                    ramTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&gt;</code></t\
-                    d>""",
+                    <div class="col-first even-row-color"><code><a href="../ParamTest.html" title="class\
+                     in pkg2">ParamTest</a>&lt;<a href="../Foo.html" title="class in pkg2">Foo</a>&\
+                    gt;</code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../ParamTest.html" title="class in pkg2">ParamTest</a\
-                    ></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../ParamTest.html" title="class in pkg2\
+                    ">ParamTest</a></span></div>""",
                 """
-                    <td class="col-first"><code>&lt;T extends <a href="../ParamTest.html" title="cla\
-                    ss in pkg2">ParamTest</a>&lt;<a href="../Foo3.html" title="class in pkg2">Foo3</\
-                    a>&gt;&gt;<br><a href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt\
-                    ;<a href="../Foo3.html" title="class in pkg2">Foo3</a>&gt;</code></td>"""
+                    <div class="col-first even-row-color"><code>&lt;T extends <a href="../ParamTest.html\
+                    " title="class in pkg2">ParamTest</a>&lt;<a href="../Foo3.html" title="class in\
+                     pkg2">Foo3</a>&gt;&gt;<br><a href="../ParamTest.html" title="class in pkg2">Pa\
+                    ramTest</a>&lt;<a href="../Foo3.html" title="class in pkg2">Foo3</a>&gt;</code>\
+                    </div>"""
         );
 
         checkOutput("pkg2/class-use/Foo3.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo3.html" title="class in pkg2">Foo3</a></span></\
-                    caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo3.html" title="class in pkg2">Foo\
+                    3</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest2.html" title="class in pkg2">ClassUseTest2</a>&lt;T extends <a \
-                    href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt;<a href="../Foo3\
-                    .html" title="class in pkg2">Foo3</a>&gt;&gt;</span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest2.html" title="class in pkg2">ClassUseTest2</a>&lt;T extends <a\
+                     href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt;<a href="../Fo\
+                    o3.html" title="class in pkg2">Foo3</a>&gt;&gt;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo3.html" title="class in pkg2">Foo3</a></span></\
-                    caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo3.html" title="class in pkg2">Foo\
+                    3</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest2.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest2.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>""",
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest2.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest2.html#metho\
+                    d(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> that return\
-                     types with arguments of type <a href="../Foo3.html" title="class in pkg2">Foo3<\
-                    /a></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > that return types with arguments of type <a href="../Foo3.html" title="class\
+                     in pkg2">Foo3</a></span></div>""",
                 """
-                    <td class="col-first"><code>&lt;T extends <a href="../ParamTest.html" title="cla\
-                    ss in pkg2">ParamTest</a>&lt;<a href="../Foo3.html" title="class in pkg2">Foo3</\
-                    a>&gt;&gt;<br><a href="../ParamTest.html" title="class in pkg2">ParamTest</a>&lt\
-                    ;<a href="../Foo3.html" title="class in pkg2">Foo3</a>&gt;</code></td>"""
+                    <div class="col-first even-row-color"><code>&lt;T extends <a href="../ParamTest.html\
+                    " title="class in pkg2">ParamTest</a>&lt;<a href="../Foo3.html" title="class in\
+                     pkg2">Foo3</a>&gt;&gt;<br><a href="../ParamTest.html" title="class in pkg2">Pa\
+                    ramTest</a>&lt;<a href="../Foo3.html" title="class in pkg2">Foo3</a>&gt;</code>\
+                    </div>"""
         );
 
         // ClassUseTest3: <T extends ParamTest2<List<? extends Foo4>>>
         checkOutput("pkg2/class-use/ParamTest2.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../ParamTest2.html" title="class in pkg2">ParamTest2<\
-                    /a></span></caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../ParamTest2.html" title="class in pkg\
+                    2">ParamTest2</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest3.html" title="class in pkg2">ClassUseTest3</a>&lt;T extends <a \
-                    href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.List\
-                    &lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&gt;<\
-                    /span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest3.html" title="class in pkg2">ClassUseTest3</a>&lt;T extends <a\
+                     href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.Li\
+                    st&lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&g\
+                    t;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../ParamTest2.html" title="class in pkg2">ParamTest2<\
-                    /a></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../ParamTest2.html" title="class in pkg\
+                    2">ParamTest2</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest3.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest3.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>""",
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest3.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest3.html#metho\
+                    d(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>""",
                 """
-                    <td class="col-first"><code>&lt;T extends <a href="../ParamTest2.html" title="cl\
-                    ass in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo4.html\
-                    " title="class in pkg2">Foo4</a>&gt;&gt;&gt;<br><a href="../ParamTest2.html" tit\
-                    le="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo\
-                    4.html" title="class in pkg2">Foo4</a>&gt;&gt;</code></td>"""
+                    <div class="col-first even-row-color"><code>&lt;T extends <a href="../ParamTest2.htm\
+                    l" title="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href=\
+                    "../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&gt;<br><a href="../ParamT\
+                    est2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends\
+                     <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;</code></div>"""
         );
 
         checkOutput("pkg2/class-use/Foo4.html", true,
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo4.html" title="class in pkg2">Foo4</a></span></\
-                    caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo4.html" title="class in pkg2">Foo\
+                    4</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "../ClassUseTest3.html" title="class in pkg2">ClassUseTest3</a>&lt;T extends <a \
-                    href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.List\
-                    &lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&gt;<\
-                    /span></code></th>""",
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href=\
+                    "../ClassUseTest3.html" title="class in pkg2">ClassUseTest3</a>&lt;T extends <a\
+                     href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.Li\
+                    st&lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&g\
+                    t;</span></code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> with type p\
-                    arameters of type <a href="../Foo4.html" title="class in pkg2">Foo4</a></span></\
-                    caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > with type parameters of type <a href="../Foo4.html" title="class in pkg2">Foo\
+                    4</a></span></div>""",
                 """
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest3.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest3.html#method\
-                    (T)">method</a></span>&#8203;(T&nbsp;t)</code></th>""",
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest3.\
+                    </span><code><span class="member-name-link"><a href="../ClassUseTest3.html#met\
+                    hod(T)">method</a></span>&#8203;(T&nbsp;t)</code></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg2</a> that return\
-                     types with arguments of type <a href="../Foo4.html" title="class in pkg2">Foo4<\
-                    /a></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg2</a\
+                    > that return types with arguments of type <a href="../Foo4.html" title="class\
+                     in pkg2">Foo4</a></span></div>""",
                 """
-                    <td class="col-first"><code>&lt;T extends <a href="../ParamTest2.html" title="cl\
-                    ass in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo4.html\
-                    " title="class in pkg2">Foo4</a>&gt;&gt;&gt;<br><a href="../ParamTest2.html" tit\
-                    le="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo\
-                    4.html" title="class in pkg2">Foo4</a>&gt;&gt;</code></td>"""
+                    <div class="col-first even-row-color"><code>&lt;T extends <a href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;&gt;<br><a href="../ParamTest2.html" title="class in pkg2">ParamTest2</a>&lt;java.util.List&lt;? extends <a href="../Foo4.html" title="class in pkg2">Foo4</a>&gt;&gt;</code></div>"""
         );
 
         // Type parameters in constructor and method args
         checkOutput("pkg2/class-use/Foo4.html", true,
                 """
-                    <caption><span>Method parameters in <a href="../package-summary.html">pkg2</a> w\
-                    ith type arguments of type <a href="../Foo4.html" title="class in pkg2">Foo4</a>\
-                    </span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <td class="col-first"><code>void</code></td>
-                    <th class="col-second" scope="row"><span class="type-name-label">ClassUseTest3.<\
-                    /span><code><span class="member-name-link"><a href="../ClassUseTest3.html#method\
-                    (java.util.Set)">method</a></span>&#8203;(java.util.Set&lt;<a href="../Foo4.html\
-                    " title="class in pkg2">Foo4</a>&gt;&nbsp;p)</code></th>""",
+                    <div class="caption"><span>Method parameters in <a href="../package-summary.htm\
+                    l">pkg2</a> with type arguments of type <a href="../Foo4.html" title="class in\
+                     pkg2">Foo4</a></span></div>
+                    <div class="summary-table three-column-summary">
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><code>void</code></div>
+                    <div class="col-second even-row-color"><span class="type-name-label">ClassUseTest3.<\
+                    /span><code><span class="member-name-link"><a href="../ClassUseTest3.html#metho\
+                    d(java.util.Set)">method</a></span>&#8203;(java.util.Set&lt;<a href="../Foo4.ht\
+                    ml" title="class in pkg2">Foo4</a>&gt;&nbsp;p)</code></div>
+                    <div class="col-last even-row-color">&nbsp;</div>""",
                 """
-                    <caption><span>Constructor parameters in <a href="../package-summary.html">pkg2<\
+                    <div class="caption"><span>Constructor parameters in <a href="../package-summary.html">pkg2<\
                     /a> with type arguments of type <a href="../Foo4.html" title="class in pkg2">Foo\
-                    4</a></span></caption>"""
+                    4</a></span></div>"""
         );
 
         //=================================
@@ -573,32 +576,32 @@ public class TestNewLanguageFeatures extends JavadocTester {
         //=================================
         checkOutput("pkg/class-use/AnnotationType.html", true,
                 """
-                    <caption><span>Packages with annotations of type <a href="../AnnotationType.html\
-                    " title="annotation in pkg">AnnotationType</a></span></caption>""",
+                    <div class="caption"><span>Packages with annotations of type <a href="../Annotat\
+                    ionType.html" title="annotation in pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Classes in <a href="../package-summary.html">pkg</a> with annotat\
-                    ions of type <a href="../AnnotationType.html" title="annotation in pkg">Annotati\
-                    onType</a></span></caption>""",
+                    <div class="caption"><span>Classes in <a href="../package-summary.html">pkg</a>\
+                     with annotations of type <a href="../AnnotationType.html" title="annotation in\
+                     pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Fields in <a href="../package-summary.html">pkg</a> with annotati\
-                    ons of type <a href="../AnnotationType.html" title="annotation in pkg">Annotatio\
-                    nType</a></span></caption>""",
+                    <div class="caption"><span>Fields in <a href="../package-summary.html">pkg</a>\
+                     with annotations of type <a href="../AnnotationType.html" title="annotation in\
+                     pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Methods in <a href="../package-summary.html">pkg</a> with annotat\
-                    ions of type <a href="../AnnotationType.html" title="annotation in pkg">Annotati\
-                    onType</a></span></caption>""",
+                    <div class="caption"><span>Methods in <a href="../package-summary.html">pkg</a>\
+                     with annotations of type <a href="../AnnotationType.html" title="annotation in\
+                     pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Method parameters in <a href="../package-summary.html">pkg</a> wi\
-                    th annotations of type <a href="../AnnotationType.html" title="annotation in pkg\
-                    ">AnnotationType</a></span></caption>""",
+                    <div class="caption"><span>Method parameters in <a href="../package-summary.htm\
+                    l">pkg</a> with annotations of type <a href="../AnnotationType.html" title="ann\
+                    otation in pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Constructors in <a href="../package-summary.html">pkg</a> with an\
-                    notations of type <a href="../AnnotationType.html" title="annotation in pkg">Ann\
-                    otationType</a></span></caption>""",
+                    <div class="caption"><span>Constructors in <a href="../package-summary.html">pk\
+                    g</a> with annotations of type <a href="../AnnotationType.html" title="annotati\
+                    on in pkg">AnnotationType</a></span></div>""",
                 """
-                    <caption><span>Constructor parameters in <a href="../package-summary.html">pkg</\
-                    a> with annotations of type <a href="../AnnotationType.html" title="annotation i\
-                    n pkg">AnnotationType</a></span></caption>"""
+                    <div class="caption"><span>Constructor parameters in <a href="../package-summar\
+                    y.html">pkg</a> with annotations of type <a href="../AnnotationType.html" title\
+                    ="annotation in pkg">AnnotationType</a></span></div>"""
         );
 
         //==============================================================

test/langtools/jdk/javadoc/doclet/testOverriddenMethods/TestOverrideMethods.java

@@ -314,24 +314,19 @@ public class TestOverrideMethods  extends JavadocTester {
         // Only m2 should be shown in summary; m1 and m3 should listed as declared in Base
         checkOutput("pkg6/Sub.html", true,
                 """
-                    <table class="summary-table" aria-labelledby="t0">
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Modifier and Type</th>
-                    <th class="col-second" scope="col">Method</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color" id="i0">
-                    <td class="col-first"><code>java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#m2()">m2</a></span>()</code></th>
-                    <td class="col-last">
+                    <div class="summary-table three-column-summary" aria-labelledby="method-summary-table-tab0">
+                    <div class="table-header col-first">Modifier and Type</div>
+                    <div class="table-header col-second">Method</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#m2()">\
+                    m2</a></span>()</code></div>
+                    <div class="col-last even-row-color method-summary-table-tab2 method-summary-table-tab4 method-summary-table">
                     <div class="block">This is Base::m2.</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>
+                    </div>
+                    </div>
                     """,
                 """
                     <div class="inherited-list">

test/langtools/jdk/javadoc/doclet/testPackageDeprecation/TestPackageDeprecation.java

@@ -73,7 +73,7 @@ public class TestPackageDeprecation extends JavadocTester {
                 "pkg1");
         checkOutput("class-use/C2.ModalExclusionType.html", true,
                 """
-                    <th class="col-first" scope="row"><a href="#unnamed.package">&lt;Unnamed&gt;</a></th>""");
+                    <div class="col-first even-row-color"><a href="#unnamed.package">&lt;Unnamed&gt;</a></div>""");
 
         checkFiles(false,
                 "pkg1/package-summary.html",

test/langtools/jdk/javadoc/doclet/testPackagePage/TestPackagePage.java

@@ -90,27 +90,18 @@ public class TestPackagePage extends JavadocTester {
             "<li>Package</li>");
         checkOutput("allclasses-index.html", true,
                 """
-                    <div class="type-summary" id="all-classes-table">
-                    <table class="summary-table">
-                    <caption><span>Class Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
+                    <div id="all-classes-table">
+                    <div class="caption"><span>Class Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>
                     """);
         checkOutput("allpackages-index.html", true,
                 """
-                    <div class="packages-summary">
-                    <table class="summary-table">
-                    <caption><span>Package Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
+                    <div class="caption"><span>Package Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
                     """);
         checkOutput("type-search-index.js", true,
                 """

test/langtools/jdk/javadoc/doclet/testPackageSummary/TestPackageSummary.java

@@ -24,7 +24,7 @@
 
 /*
  * @test
- * @bug 8189841
+ * @bug 8189841 8253117
  * @summary Error in alternate row coloring in package-summary files
  * @library  ../../lib/
  * @modules jdk.javadoc/jdk.javadoc.internal.tool
@@ -50,28 +50,16 @@ public class TestPackageSummary extends JavadocTester {
 
         checkOutput("pkg/package-summary.html", true,
                 """
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="C0.html" title="class in pkg">C0</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-first" scope="row"><a href="C1.html" title="class in pkg">C1</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="C2.html" title="class in pkg">C2</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-first" scope="row"><a href="C3.html" title="class in pkg">C3</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="C4.html" title="class in pkg">C4</a></th>
-                    <td class="col-last">&nbsp;</td>
-                    </tr>
-                    </tbody>
+                    <div class="col-first even-row-color"><a href="C0.html" title="class in pkg">C0</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>
+                    <div class="col-first odd-row-color"><a href="C1.html" title="class in pkg">C1</a></div>
+                    <div class="col-last odd-row-color">&nbsp;</div>
+                    <div class="col-first even-row-color"><a href="C2.html" title="class in pkg">C2</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>
+                    <div class="col-first odd-row-color"><a href="C3.html" title="class in pkg">C3</a></div>
+                    <div class="col-last odd-row-color">&nbsp;</div>
+                    <div class="col-first even-row-color"><a href="C4.html" title="class in pkg">C4</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>
                     """
         );
     }

test/langtools/jdk/javadoc/doclet/testProperty/TestProperty.java

@@ -75,23 +75,24 @@ public class TestProperty extends JavadocTester {
                     <a href="#setBad(pkg.MyObj%5B%5D)"><code>setBad(MyObj[])</code></a></dd>
                     </dl>""",
 
-                // id should not be used in the property table
+                // no tab classes should be used in the property table
                 """
-                    <tr class="alt-color">
-                    <td class="col-first"><code><a href="ObjectProperty.html" title="class in pkg">O\
-                    bjectProperty</a>&lt;<a href="MyObj.html" title="class in pkg">MyObj</a>[]&gt;</\
-                    code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#badProperty">bad</a></span></code></th>""",
+                    <div class="col-first even-row-color"><code><a href="ObjectProperty.html" title="clas\
+                    s in pkg">ObjectProperty</a>&lt;<a href="MyObj.html" title="class in pkg">MyObj<\
+                    /a>[]&gt;</code></div>
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="\
+                    #badProperty">bad</a></span></code></div>
+                    <div class="col-last even-row-color">""",
 
-                // id should be used in the method table
+                // tab classes should be used in the method table
                 """
-                    <tr class="alt-color" id="i0">
-                    <td class="col-first"><code><a href="ObjectProperty.html" title="class in pkg">O\
-                    bjectProperty</a>&lt;<a href="MyObj.html" title="class in pkg">MyObj</a>[]&gt;</\
-                    code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#badProperty()">badProperty</a></span>()</code></th>"""
+                    <div class="col-first even-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code><a href="ObjectProperty.html" title="class in pk\
+                    g">ObjectProperty</a>&lt;<a href="MyObj.html" title="class in pkg">MyObj</a>[]&g\
+                    t;</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#badPro\
+                    perty()">badProperty</a></span>()</code></div>"""
         );
 
         checkOutput("pkg/MyClassT.html", true,

test/langtools/jdk/javadoc/doclet/testSearch/TestSearch.java

@@ -813,45 +813,47 @@ public class TestSearch extends JavadocTester {
     void checkAllPkgsAllClasses() {
         checkOutput("allclasses-index.html", true,
                 """
-                    <div class="type-summary" id="all-classes-table">
-                    <div class="table-tabs" role="tablist" aria-orientation="horizontal"><button rol\
-                    e="tab" aria-selected="true" aria-controls="all-classes-table.tabpanel" tabindex\
-                    ="0" onkeydown="switchTab(event)" id="t0" class="active-table-tab">All Classes</\
-                    button><button role="tab" aria-selected="false" aria-controls="all-classes-table\
-                    .tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t1" class="table-tab" \
-                    onclick="show(1);">Interface Summary</button><button role="tab" aria-selected="f\
-                    alse" aria-controls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switch\
-                    Tab(event)" id="t2" class="table-tab" onclick="show(2);">Class Summary</button><\
-                    button role="tab" aria-selected="false" aria-controls="all-classes-table.tabpane\
-                    l" tabindex="-1" onkeydown="switchTab(event)" id="t3" class="table-tab" onclick=\
-                    "show(4);">Enum Summary</button><button role="tab" aria-selected="false" aria-co\
-                    ntrols="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" i\
-                    d="t4" class="table-tab" onclick="show(8);">Exception Summary</button><button ro\
-                    le="tab" aria-selected="false" aria-controls="all-classes-table.tabpanel" tabind\
-                    ex="-1" onkeydown="switchTab(event)" id="t5" class="table-tab" onclick="show(16)\
-                    ;">Error Summary</button><button role="tab" aria-selected="false" aria-controls=\
-                    "all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" id="t6" \
-                    class="table-tab" onclick="show(32);">Annotation Types Summary</button></div>
+                    <div id="all-classes-table">
+                    <div class="table-tabs" role="tablist" aria-orientation="horizontal">\
+                    <button id="all-classes-table-tab0" role="tab" aria-selected="true" aria-control\
+                    s="all-classes-table.tabpanel" tabindex="0" onkeydown="switchTab(event)" onclick\
+                    ="show('all-classes-table', 'all-classes-table', 2)" class="active-table-tab">Al\
+                    l Classes</button>\
+                    <button id="all-classes-table-tab1" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab1', 2)" class="table-tab">In\
+                    terface Summary</button>\
+                    <button id="all-classes-table-tab2" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab2', 2)" class="table-tab">Cl\
+                    ass Summary</button>\
+                    <button id="all-classes-table-tab3" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab3', 2)" class="table-tab">En\
+                    um Summary</button>\
+                    <button id="all-classes-table-tab4" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab4', 2)" class="table-tab">Ex\
+                    ception Summary</button>\
+                    <button id="all-classes-table-tab5" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab5', 2)" class="table-tab">Er\
+                    ror Summary</button>\
+                    <button id="all-classes-table-tab6" role="tab" aria-selected="false" aria-contro\
+                    ls="all-classes-table.tabpanel" tabindex="-1" onkeydown="switchTab(event)" oncli\
+                    ck="show('all-classes-table', 'all-classes-table-tab6', 2)" class="table-tab">An\
+                    notation Types Summary</button>\
+                    </div>
                     <div id="all-classes-table.tabpanel" role="tabpanel">
-                    <table class="summary-table" aria-labelledby="t0">
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>""",
-                """
-                    var data = {"i0":32,"i1":2,"i2":4,"i3":2,"i4":2,"i5":1,"i6":2,"i7":32,"i8":2,"i9\
-                    ":4,"i10":16,"i11":16,"i12":8,"i13":8,"i14":1,"i15":2};""");
+                    <div class="summary-table two-column-summary" aria-labelledby="all-classes-table-tab0">
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>""");
         checkOutput("allpackages-index.html", true,
                 """
-                    <div class="packages-summary">
-                    <table class="summary-table">
-                    <caption><span>Package Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
+                    <div class="caption"><span>Package Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
                     """);
         checkOutput("type-search-index.js", true,
                 """

test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java

@@ -25,6 +25,7 @@
  * @test
  * @bug      4494033 7028815 7052425 8007338 8023608 8008164 8016549 8072461 8154261 8162363 8160196 8151743 8177417
  *           8175218 8176452 8181215 8182263 8183511 8169819 8183037 8185369 8182765 8196201 8184205 8223378 8241544
+ *           8253117
  * @summary  Run tests on doclet stylesheet.
  * @library  /tools/lib ../../lib
  * @modules jdk.javadoc/jdk.javadoc.internal.tool
@@ -89,10 +90,7 @@ public class TestStylesheet extends JavadocTester {
                 + "    list-style-type:disc;\n"
                 + "}",
                 """
-                    .overview-summary caption, .member-summary caption, .type-summary caption,
-                    .use-summary caption, .constants-summary caption, .deprecated-summary caption,
-                    .requires-summary caption, .packages-summary caption, .provides-summary caption,
-                    .uses-summary caption, .system-properties-summary caption {
+                    .caption {
                         position:relative;
                         text-align:left;
                         background-repeat:no-repeat;
@@ -107,10 +105,7 @@ public class TestStylesheet extends JavadocTester {
                         white-space:pre;
                     }""",
                 """
-                    .overview-summary caption span, .member-summary caption span, .type-summary caption span,
-                    .use-summary caption span, .constants-summary caption span, .deprecated-summary caption span,
-                    .requires-summary caption span, .packages-summary caption span, .provides-summary caption span,
-                    .uses-summary caption span, .system-properties-summary caption span {
+                    .caption span {
                         white-space:nowrap;
                         padding-top:5px;
                         padding-left:12px;
@@ -140,23 +135,14 @@ public class TestStylesheet extends JavadocTester {
                     }""",
                 // Test the formatting styles for proper content display in use and constant values pages.
                 """
-                    .overview-summary td.col-first, .overview-summary th.col-first,
-                    .requires-summary td.col-first, .requires-summary th.col-first,
-                    .packages-summary td.col-first, .packages-summary td.col-second, .packages-summary th.col-first, .packages-summary th,
-                    .uses-summary td.col-first, .uses-summary th.col-first,
-                    .provides-summary td.col-first, .provides-summary th.col-first,
-                    .member-summary td.col-first, .member-summary th.col-first,
-                    .member-summary td.col-second, .member-summary th.col-second, .member-summary th.col-constructor-name,
-                    .type-summary td.col-first, .type-summary th.col-first {
+                    .col-first, .col-second, .col-constructor-name {
                         vertical-align:top;
+                        overflow: auto;
                     }""",
                 """
-                    .overview-summary td, .member-summary td, .type-summary td,
-                    .use-summary td, .constants-summary td, .deprecated-summary td,
-                    .requires-summary td, .packages-summary td, .provides-summary td,
-                    .uses-summary td, .system-properties-summary td {
+                    .summary-table > div {
                         text-align:left;
-                        padding:0px 0px 12px 10px;
+                        padding: 8px 3px 3px 7px;
                     }""",
                 "@import url('resources/fonts/dejavu.css');",
                 """
@@ -169,15 +155,15 @@ public class TestStylesheet extends JavadocTester {
                         color:#bb7a2a;
                     }""",
                 """
-                    td.col-first a:link, td.col-first a:visited,
-                    td.col-second a:link, td.col-second a:visited,
-                    th.col-first a:link, th.col-first a:visited,
-                    th.col-second a:link, th.col-second a:visited,
-                    th.col-constructor-name a:link, th.col-constructor-name a:visited,
-                    th.col-deprecated-item-name a:link, th.col-deprecated-item-name a:visited,
-                    .constant-values-container td a:link, .constant-values-container td a:visited,
-                    .all-classes-container td a:link, .all-classes-container td a:visited,
-                    .all-packages-container td a:link, .all-packages-container td a:visited {
+                    .col-first a:link, .col-first a:visited,
+                    .col-second a:link, .col-second a:visited,
+                    .col-first a:link, .col-first a:visited,
+                    .col-second a:link, .col-second a:visited,
+                    .col-constructor-name a:link, .col-constructor-name a:visited,
+                    .col-deprecated-item-name a:link, .col-deprecated-item-name a:visited,
+                    .constant-values-container a:link, .constant-values-container a:visited,
+                    .all-classes-container a:link, .all-classes-container a:visited,
+                    .all-packages-container a:link, .all-packages-container a:visited {
                         font-weight:bold;
                     }""",
                 """
@@ -223,10 +209,10 @@ public class TestStylesheet extends JavadocTester {
 
         checkOutput("pkg/package-summary.html", true,
                 """
-                    <td class="col-last">
+                    <div class="col-last even-row-color">
                     <div class="block">Test comment for a class which has an <a name="named_anchor">anchor_with_name</a> and
                      an <a id="named_anchor1">anchor_with_id</a>.</div>
-                    </td>""");
+                    </div>""");
 
         checkOutput("index.html", true,
                 """

test/langtools/jdk/javadoc/doclet/testSystemPropertyPage/TestSystemPropertyPage.java

@@ -78,36 +78,19 @@ public class TestSystemPropertyPage extends JavadocTester {
                     </div>""",
 
                 """
-                    <table class="summary-table">
-                    <caption><span>System Properties Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Property</th>
-                    <th class="col-last" scope="col">Referenced In</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row">user.address</th>
-                    <td class="col-last">
-                    <div class="block"><code><a href="pkg2/B.html#user.address">class pkg2.B</a></co\
-                    de>, <a href="pkg1/doc-files/WithTitle.html#user.address"><code>package pkg1: </\
-                    code>Example Title</a></div>
-                    </td>
-                    </tr>
-                    <tr class="row-color">
-                    <th class="col-first" scope="row">user.name</th>
-                    <td class="col-last">
-                    <div class="block"><a href="index.html#user.name">Overview</a>, <code><a href="p\
-                    kg1/A.html#user.name">class pkg1.A</a></code>, <a href="pkg1/doc-files/WithEmpty\
-                    Title.html#user.name"><code>package pkg1: </code>WithEmptyTitle.html</a>, <a hre\
-                    f="pkg1/doc-files/WithTitle.html#user.name"><code>package pkg1: </code>Example T\
-                    itle</a>, <a href="pkg1/doc-files/WithoutTitle.html#user.name"><code>package pkg\
-                    1: </code>WithoutTitle.html</a></div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>""");
+                    <div class="caption"><span>System Properties Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Property</div>
+                    <div class="table-header col-last">Referenced In</div>
+                    <div class="col-first even-row-color">user.address</div>
+                    <div class="col-last even-row-color">
+                    <div class="block"><code><a href="pkg2/B.html#user.address">class pkg2.B</a></code>, <a href="pkg1/doc-files/WithTitle.html#user.address"><code>package pkg1: </code>Example Title</a></div>
+                    </div>
+                    <div class="col-first odd-row-color">user.name</div>
+                    <div class="col-last odd-row-color">
+                    <div class="block"><a href="index.html#user.name">Overview</a>, <code><a href="pkg1/A.html#user.name">class pkg1.A</a></code>, <a href="pkg1/doc-files/WithEmptyTitle.html#user.name"><code>package pkg1: </code>WithEmptyTitle.html</a>, <a href="pkg1/doc-files/WithTitle.html#user.name"><code>package pkg1: </code>Example Title</a>, <a href="pkg1/doc-files/WithoutTitle.html#user.name"><code>package pkg1: </code>WithoutTitle.html</a></div>
+                    </div>
+                    </div>""");
     }
 
     /*

test/langtools/jdk/javadoc/doclet/testTypeAnnotations/TestTypeAnnotations.java

@@ -550,51 +550,51 @@ public class TestTypeAnnotations extends JavadocTester {
 
         checkOutput("typeannos/RepeatingOnField.html", true,
                 """
-                    <code>(package private) java.lang.Integer</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#i1">i1</a></span></code>""",
+                    <div class="col-first even-row-color"><code>(package private) java.lang.Integer</code></div>
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="#i1">i1</a></span></code></div>""",
 
                 """
-                    <code>(package private) <a href="RepTypeUseA.html" title="annotation in typeanno\
-                    s">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@\
-                    RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepT\
-                    ypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeU\
-                    seB</a> java.lang.Integer</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#i2">i2</a></span></code>""",
+                    <div class="col-first odd-row-color"><code>(package private) <a href="RepTypeUseA.ht\
+                    ml" title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.html"\
+                     title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html" tit\
+                    le="annotation in typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" title="\
+                    annotation in typeannos">@RepTypeUseB</a> java.lang.Integer</code></div>
+                    <div class="col-second odd-row-color"><code><span class="member-name-link"><a href="\
+                    #i2">i2</a></span></code></div>
+                    <div class="col-last odd-row-color">&nbsp;</div>""",
 
                 """
-                    <code>(package private) <a href="RepTypeUseA.html" title="annotation in typeanno\
-                    s">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@\
-                    RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepT\
-                    ypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeU\
-                    seB</a> java.lang.Integer</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#i3">i3</a></span></code>""",
+                    <div class="col-first even-row-color"><code>(package private) <a href="RepTypeUseA.ht\
+                    ml" title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.html"\
+                     title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html" tit\
+                    le="annotation in typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" title="\
+                    annotation in typeannos">@RepTypeUseB</a> java.lang.Integer</code></div>
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="#i3">i3</a></span></code></div>""",
 
                 """
-                    <code>(package private) <a href="RepAllContextsA.html" title="annotation in type\
-                    annos">@RepAllContextsA</a> <a href="RepAllContextsA.html" title="annotation in \
-                    typeannos">@RepAllContextsA</a> <a href="RepAllContextsB.html" title="annotation\
-                     in typeannos">@RepAllContextsB</a> <a href="RepAllContextsB.html" title="annota\
-                    tion in typeannos">@RepAllContextsB</a> java.lang.Integer</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#i4">i4</a></span></code>""",
+                    <div class="col-first odd-row-color"><code>(package private) <a href="RepAllContexts\
+                    A.html" title="annotation in typeannos">@RepAllContextsA</a> <a href="RepAllCont\
+                    extsA.html" title="annotation in typeannos">@RepAllContextsA</a> <a href="RepAll\
+                    ContextsB.html" title="annotation in typeannos">@RepAllContextsB</a> <a href="Re\
+                    pAllContextsB.html" title="annotation in typeannos">@RepAllContextsB</a> java.la\
+                    ng.Integer</code></div>
+                    <div class="col-second odd-row-color"><code><span class="member-name-link"><a href="#i4">i4</a></span></code></div>""",
 
                 """
-                    <code>(package private) java.lang.String <a href="RepTypeUseA.html" title="annot\
-                    ation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotatio\
-                    n in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in\
-                     typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typ\
-                    eannos">@RepTypeUseB</a> [] <a href="RepTypeUseA.html" title="annotation in type\
-                    annos">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeanno\
-                    s">@RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@\
-                    RepTypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepT\
-                    ypeUseB</a> []</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#sa">sa</a></span></code>""",
+                    <div class="col-first even-row-color"><code>(package private) java.lang.String <a hre\
+                    f="RepTypeUseA.html" title="annotation in typeannos">@RepTypeUseA</a> <a href="R\
+                    epTypeUseA.html" title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTy\
+                    peUseB.html" title="annotation in typeannos">@RepTypeUseB</a> <a href="RepTypeUs\
+                    eB.html" title="annotation in typeannos">@RepTypeUseB</a> [] <a href="RepTypeUse\
+                    A.html" title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.ht\
+                    ml" title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html"\
+                     title="annotation in typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" tit\
+                    le="annotation in typeannos">@RepTypeUseB</a> []</code></div>
+                    <div class="col-second even-row-color"><code><span class="member-name-link"><a href="#sa">sa</a></span></code></div>""",
 
                 """
-                    <div class="member-signature"><span class="annotations"><a href="RepFieldA.html"\
-                     title="annotation in typeannos">@RepFieldA</a> <a href="RepFieldA.html" title="\
-                    annotation in typeannos">@RepFieldA</a>
-                    <a href="RepFieldB.html" title="annotation in typeannos">@RepFieldB</a> <a href=\
-                    "RepFieldB.html" title="annotation in typeannos">@RepFieldB</a>
+                    <div class="member-signature"><span class="annotations"><a href="RepFieldA.html" title="annotation in typeannos">@RepFieldA</a> <a href="RepFieldA.html" title="annotation in typeannos">@RepFieldA</a>
+                    <a href="RepFieldB.html" title="annotation in typeannos">@RepFieldB</a> <a href="RepFieldB.html" title="annotation in typeannos">@RepFieldB</a>
                     </span><span class="return-type">java.lang.Integer</span>&nbsp;<span class="member-name">i1</span></div>""",
 
                 """
@@ -646,41 +646,49 @@ public class TestTypeAnnotations extends JavadocTester {
 
         checkOutput("typeannos/RepeatingOnMethod.html", true,
                 """
-                    <code>(package private) java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#test1()">test1</a></span>()</code>""",
+                    <code>(package private) java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#test1(\
+                    )">test1</a></span>()</code>""",
 
                 """
                     <code>(package private) <a href="RepTypeUseA.html" title="annotation in typeanno\
                     s">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@\
                     RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepT\
                     ypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeU\
-                    seB</a> java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#test2()">test2</a></span>()</code>""",
+                    seB</a> java.lang.String</code></div>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#test2(\
+                    )">test2</a></span>()</code>""",
 
                 """
                     <code>(package private) <a href="RepTypeUseA.html" title="annotation in typeanno\
                     s">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@\
                     RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepT\
                     ypeUseB</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeU\
-                    seB</a> java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#test3()">test3</a></span>()</code>""",
+                    seB</a> java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#test3(\
+                    )">test3</a></span>()</code>""",
 
                 """
                     <code>(package private) <a href="RepAllContextsA.html" title="annotation in type\
-                    annos">@RepAllContextsA</a> <a href="RepAllContextsA.html" title="annotation in \
-                    typeannos">@RepAllContextsA</a> <a href="RepAllContextsB.html" title="annotation\
-                     in typeannos">@RepAllContextsB</a> <a href="RepAllContextsB.html" title="annota\
-                    tion in typeannos">@RepAllContextsB</a> java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#test4()">test4</a></span>()</code>""",
+                    annos">@RepAllContextsA</a> <a href="RepAllContextsA.html" title="annotation in\
+                     typeannos">@RepAllContextsA</a> <a href="RepAllContextsB.html" title="annotatio\
+                    n in typeannos">@RepAllContextsB</a> <a href="RepAllContextsB.html" title="annot\
+                    ation in typeannos">@RepAllContextsB</a> java.lang.String</code></div>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#test4(\
+                    )">test4</a></span>()</code>""",
 
                 """
                     <code><span class="member-name-link"><a href="#test5(java.lang.String,java.lang.\
                     String...)">test5</a></span>&#8203;(java.lang.String&nbsp;parameter,
-                     java.lang.String <a href="RepTypeUseA.html" title="annotation in typeannos">@Rep\
-                    TypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@RepType\
-                    UseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeUseB\
-                    </a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeUseB</a>\
-                     ...&nbsp;vararg)</code>""",
+                     java.lang.String <a href="RepTypeUseA.html" title="annotation in typeannos">@Re\
+                    pTypeUseA</a> <a href="RepTypeUseA.html" title="annotation in typeannos">@RepTyp\
+                    eUseA</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeUse\
+                    B</a> <a href="RepTypeUseB.html" title="annotation in typeannos">@RepTypeUseB</a\
+                    > ...&nbsp;vararg)</code>""",
 
                 """
                     <a href="RepMethodA.html" title="annotation in typeannos">@RepMethodA</a> <a hre\
@@ -746,22 +754,26 @@ public class TestTypeAnnotations extends JavadocTester {
 
         checkOutput("typeannos/RepeatingOnTypeParametersBoundsTypeArgumentsOnMethod.html", true,
                 """
-                    <code>(package private) &lt;T&gt;&nbsp;java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#genericMethod(T)">genericMethod</a></span>&#8203;(T&nbsp;t)</code>""",
+                    <code>(package private) &lt;T&gt;&nbsp;java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#generi\
+                    cMethod(T)">genericMethod</a></span>&#8203;(T&nbsp;t)</code>""",
 
                 """
-                    <code>(package private) &lt;T&gt;&nbsp;java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                    "#genericMethod2(T)">genericMethod2</a></span>&#8203;(<a href="RepTypeUseA.html"\
-                     title="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.html" tit\
-                    le="annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html" title="\
-                    annotation in typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" title="anno\
-                    tation in typeannos">@RepTypeUseB</a> T&nbsp;t)</code>""",
+                    <code>(package private) &lt;T&gt;&nbsp;java.lang.String</code></div>
+                    <div class="col-second odd-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#generi\
+                    cMethod2(T)">genericMethod2</a></span>&#8203;(<a href="RepTypeUseA.html" title="\
+                    annotation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseA.html" title="anno\
+                    tation in typeannos">@RepTypeUseA</a> <a href="RepTypeUseB.html" title="annotati\
+                    on in typeannos">@RepTypeUseB</a> <a href="RepTypeUseB.html" title="annotation i\
+                    n typeannos">@RepTypeUseB</a> T&nbsp;t)</code>""",
 
                 """
-                    <code>(package private) java.lang.String</code></td>
-                    <th class="col-second" scope="row"><code><span class="member-name-link"><a href="#test()">test</a></span>()</code>""",
+                    <code>(package private) java.lang.String</code></div>
+                    <div class="col-second even-row-color method-summary-table-tab2 method-summary-table-\
+                    tab4 method-summary-table"><code><span class="member-name-link"><a href="#test()\
+                    ">test</a></span>()</code>""",
 
                 """
                     <span class="return-type">java.lang.String</span>&nbsp;<span class="member-name"\

test/langtools/jdk/javadoc/doclet/testTypeParams/TestTypeParameters.java

@@ -55,8 +55,9 @@ public class TestTypeParameters extends JavadocTester {
 
         checkOutput("pkg/C.html", true,
                 """
-                    <td class="col-first"><code>&lt;W extends java.lang.String,&#8203;
-                    V extends java.util.List&gt;<br>java.lang.Object</code></td>""",
+                    <div class="col-first odd-row-color method-summary-table-tab2 method-summary-table-t\
+                    ab4 method-summary-table"><code>&lt;W extends java.lang.String,&#8203;
+                    V extends java.util.List&gt;<br>java.lang.Object</code></div>""",
                 "<code>&lt;T&gt;&nbsp;java.lang.Object</code>");
 
         checkOutput("pkg/package-summary.html", true,

test/langtools/jdk/javadoc/doclet/testUnnamedPackage/TestUnnamedPackage.java

@@ -70,45 +70,29 @@ public class TestUnnamedPackage extends JavadocTester {
 
         checkOutput("allclasses-index.html", true,
                 """
-                    <div class="type-summary" id="all-classes-table">
-                    <table class="summary-table">
-                    <caption><span>Class Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Class</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color" id="i0">
-                    <td class="col-first"><a href="C.html" title="class in &lt;Unnamed&gt;">C</a></td>
-                    <th class="col-last" scope="row">
+                    <div id="all-classes-table">
+                    <div class="caption"><span>Class Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Class</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color all-classes-table-tab2 all-classes-table"><a hre\
+                    f="C.html" title="class in &lt;Unnamed&gt;">C</a></div>
+                    <div class="col-last even-row-color all-classes-table-tab2 all-classes-table">
                     <div class="block">This is a class in the unnamed package.</div>
-                    </th>
-                    </tr>
-                    </tbody>
-                    </table>""");
+                    </div>
+                    </div>""");
 
         checkOutput("allpackages-index.html", true,
                 """
-                    <div class="packages-summary">
-                    <table class="summary-table">
-                    <caption><span>Package Summary</span></caption>
-                    <thead>
-                    <tr>
-                    <th class="col-first" scope="col">Package</th>
-                    <th class="col-last" scope="col">Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr class="alt-color">
-                    <th class="col-first" scope="row"><a href="package-summary.html">&lt;Unnamed&gt;</a></th>
-                    <td class="col-last">
+                    <div class="caption"><span>Package Summary</span></div>
+                    <div class="summary-table two-column-summary">
+                    <div class="table-header col-first">Package</div>
+                    <div class="table-header col-last">Description</div>
+                    <div class="col-first even-row-color"><a href="package-summary.html">&lt;Unnamed&gt;</a></div>
+                    <div class="col-last even-row-color">
                     <div class="block">This is a package comment for the unnamed package.</div>
-                    </td>
-                    </tr>
-                    </tbody>
-                    </table>""");
+                    </div>
+                    </div>""");
 
         checkOutput("type-search-index.js", true,
                 """

test/langtools/jdk/javadoc/doclet/testUseOption/TestUseOption.java

@@ -129,20 +129,20 @@ public class TestUseOption extends JavadocTester {
                 Subinterfaces of <a href="../UsedInterface.html" title="interface in pkg1">UsedI\
                 nterface</a> in <a href="../package-summary.html">pkg1""",
             """
-                <td class="col-first"><code>interface&nbsp;</code></td>
-                <th class="col-second" scope="row"><code><span class="member-name-link"><a href=\
-                "../SubInterface.html" title="interface in pkg1">SubInterface</a>&lt;T&gt;</span\
-                ></code></th>"""
+                <div class="col-first even-row-color"><code>interface&nbsp;</code></div>
+                <div class="col-second even-row-color"><code><span class="member-name-link"><a href="\
+                ../SubInterface.html" title="interface in pkg1">SubInterface</a>&lt;T&gt;</span>\
+                </code></div>"""
         );
         checkOutput("pkg1/class-use/UsedThrowable.html", true,
             """
                 Methods in <a href="../package-summary.html">pkg1</a> that throw <a href="../Use\
                 dThrowable.html" title="class in pkg1">UsedThrowable</a>""",
             """
-                <td class="col-first"><code>void</code></td>
-                <th class="col-second" scope="row"><span class="type-name-label">C1.</span><code\
-                ><span class="member-name-link"><a href="../C1.html#methodInC1ThrowsThrowable()"\
-                >methodInC1ThrowsThrowable</a></span>()</code></th>"""
+                <div class="col-first even-row-color"><code>void</code></div>
+                <div class="col-second even-row-color"><span class="type-name-label">C1.</span><code>\
+                <span class="member-name-link"><a href="../C1.html#methodInC1ThrowsThrowable()">\
+                methodInC1ThrowsThrowable</a></span>()</code></div>"""
         );
     }
 
@@ -167,10 +167,10 @@ public class TestUseOption extends JavadocTester {
         );
         checkOutput("package-use.html", true,
                 """
-                    <th class="col-first" scope="row"><a href="class-use/UsedInC.html#unnamed.package">UsedInC</a></th>""",
+                    <div class="col-first even-row-color"><a href="class-use/UsedInC.html#unnamed.package">UsedInC</a></div>""",
                 """
-                    <th class="col-first" scope="row"><a href="#unnamed.package">&lt;Unnamed&gt;</a></th>
-                    <td class="col-last">&nbsp;</td>"""
+                    <div class="col-first even-row-color"><a href="#unnamed.package">&lt;Unnamed&gt;</a></div>
+                    <div class="col-last even-row-color">&nbsp;</div>"""
         );
     }
 

test/langtools/jdk/javadoc/tool/testLocaleOption/TestLocaleOption.java

@@ -183,20 +183,20 @@ public class TestLocaleOption extends TestRunner {
             checkContains(hw,
                     "<h2>METHOD SUMMARY</h2>",
                     """
-                        <th class="col-first" scope="col">MODIFIER AND TYPE</th>""",
+                        <div class="table-header col-first">MODIFIER AND TYPE</div>""",
                     """
-                        <th class="col-second" scope="col">METHOD</th>""",
+                        <div class="table-header col-second">METHOD</div>""",
                     """
-                        <th class="col-last" scope="col">DESCRIPTION</th>""");
+                        <div class="table-header col-last">DESCRIPTION</div>""");
         } else {
             checkContains(hw,
                     "<h2>Method Summary</h2>",
                     """
-                        <th class="col-first" scope="col">Modifier and Type</th>""",
+                        <div class="table-header col-first">Modifier and Type</div>""",
                     """
-                        <th class="col-second" scope="col">Method</th>""",
+                        <div class="table-header col-second">Method</div>""",
                     """
-                        <th class="col-last" scope="col">Description</th>""");
+                        <div class="table-header col-last">Description</div>""");
         }
     }