XQA
Back to Java
2026-01-146 min read

Responsive Tables (Java)

Learn Responsive Tables (Java) step by step with clear examples and exercises.

Why This Matters

today, creating responsive web applications is crucial for providing an optimal user experience across multiple devices. Responsive tables are essential components of these applications as they adapt to different screen sizes, ensuring that data remains easily accessible on smartphones, tablets, and desktop computers alike. This tutorial will guide you through the process of building responsive tables in Java, helping you excel in exams, interviews, and real-world projects.

Prerequisites

To follow this tutorial, you should have a good understanding of the following topics:

  1. Java basics (variables, data types, operators, loops, and control structures)
  2. Java collections (ArrayList, HashMap, etc.)
  3. Java I/O (reading and writing files)
  4. HTML and CSS fundamentals (tables, media queries, and responsive design)
  5. Servlets and JSP for web development in Java
  6. Familiarity with the Apache Commons FileIO library for writing output to a file or Servlet response

Core Concept

Creating a responsive table in Java involves combining HTML, CSS, and Java to generate dynamic tables that adapt to various screen sizes. We'll store the data in an ArrayList, iterate through it to create the HTML code for each row and cell, and use media queries to make the table responsive.

Here's a high-level overview of the process:

  1. Create an ArrayList to store the table data.
  2. Iterate through the ArrayList and generate the HTML code for each row and cell using Java's String manipulation capabilities.
  3. Add CSS media queries to make the table responsive.
  4. Use Servlets or JSP to serve the generated HTML code to the client, or write it to a file using Apache Commons FileIO library.

Worked Example

Let's build a simple example of a responsive table that displays data about books. We'll create an ArrayList of Book objects, generate the HTML code for the table, add CSS media queries to make it responsive, and write the output to a file using Apache Commons FileIO library.

import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import org.apache.commons.io.FileUtils;

public class ResponsiveTable {
public static void main(String[] args) throws IOException {
List<Book> books = new ArrayList<>();
books.add(new Book("1984", "George Orwell", "Dystopian Fiction"));
books.add(new Book("To Kill a Mockingbird", "Harper Lee", "Literary Fiction"));
books.add(new Book("The Great Gatsby", "F. Scott Fitzgerald", "Classic American Literature"));

generateTable(books, "example.html");
}

private static void generateTable(List<Book> books, String outputFile) throws IOException {
StringBuilder html = new StringBuilder();
html.append("<!DOCTYPE html>\n");
html.append("<html lang=\"en\">\n");
html.append("<head>\n");
html.append(" <meta charset=\"UTF-8\">\n");
html.append(" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n");
html.append(" <title>Responsive Table Example</title>\n");
html.append(" <style>\n");
html.append(" table {\n");
html.append(" width: 100%;\n");
html.append(" border-collapse: collapse;\n");
html.append(" }\n");
html.append("\n");
html.append(" th, td {\n");
html.append(" padding: 8px;\n");
html.append(" text-align: left;\n");
html.append(" border: 1px solid #ddd;\n");
html.append(" }\n");
html.append("\n");
html.append(" @media only screen and (max-width: 600px) {\n");
html.append(" table, th, td {\n");
html.append(" width: 100% !important;\n");
html.append(" height: auto !important;\n");
html.append(" }\n");
html.append(" }\n");
html.append(" </style>\n");
html.append("</head>\n");
html.append("<body>\n");
html.append(" <h1>Books</h1>\n");
html.append(" <table>\n");
html.append(" <thead>\n");
html.append(" <tr>\n");
html.append(" <th>Title</th>\n");
html.append(" <th>Author</th>\n");
html.append(" <th>Genre</th>\n");
html.append(" </tr>\n");
html.append(" </thead>\n");
html.append(" <tbody>\n");

for (Book book : books) {
html.append(" <tr>\n");
html.append(" <td>" + book.getTitle() + "</td>\n");
html.append(" <td>" + book.getAuthor() + "</td>\n");
html.append(" <td>" + book.getGenre() + "</td>\n");
html.append(" </tr>\n");
}

html.append(" </tbody>\n");
html.append(" </table>\n");
html.append("</body>\n");
html.append("</html>\n");

FileWriter file = new FileWriter(outputFile);
file.write(html.toString());
file.close();
FileUtils.copyFileToDirectory(new File(outputFile), new File("webapps/"));
}

static class Book {
private final String title;
private final String author;
private final String genre;

public Book(String title, String author, String genre) {
this.title = title;
this.author = author;
this.genre = genre;
}

public String getTitle() {
return title;
}

public String getAuthor() {
return author;
}

public String getGenre() {
return genre;
}
}
}

In this example, we've used the Apache Commons FileIO library to write the generated HTML code to a file named "example.html" in the "webapps/" directory.

Common Mistakes

  1. Forgetting to set the viewport meta tag in the HTML head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. Not applying media queries to make the table responsive:
@media only screen and (max-width: 600px) {
table, th, td {
width: 100% !important;
height: auto !important;
}
}
  1. Not properly closing the HTML tags or forgetting to escape special characters in the generated HTML code.
  2. Overlooking the importance of proper indentation and formatting in the generated HTML code for readability.
  3. Failing to test the responsive table on various devices and screen sizes to ensure it adapts correctly.
  4. Not using a library like Apache Commons FileIO to write output to a file or Servlet response, which may result in issues serving the generated HTML code to the client.

Practice Questions

  1. Modify the example to display data about movies instead of books.
  2. Add pagination to the table so that only a certain number of rows are displayed per page.
  3. Implement sorting functionality for the table based on the title, author, or genre columns.
  4. Add filtering capabilities for the table to allow users to search for specific titles, authors, or genres.
  5. Make the table scrollable vertically when there is more data than can fit on a single screen.
  6. Improve the performance of large responsive tables by implementing lazy loading or other optimization techniques.
  7. Explore using JavaScript to enhance the user experience of the responsive table, such as toggling between showing and hiding long cell content.

FAQ

  1. Why should I use media queries to make my tables responsive?

Media queries allow you to apply different styles based on the device's screen size, ensuring that your table adapts correctly to various devices and screen sizes.

  1. How can I improve the performance of a large responsive table?

To improve the performance of a large responsive table, consider using lazy loading, where you only load a certain number of rows at a time instead of all the data at once. Additionally, minimizing the use of heavy CSS and optimizing images can help improve performance.

  1. What is the best way to handle long cell content in a responsive table?

To handle long cell content in a responsive table, consider using ellipsis (...) to truncate the text when it exceeds a certain length. You can also use JavaScript to toggle between showing and hiding the full content when users click on a cell.

  1. How can I ensure that my responsive table looks good on both mobile and desktop devices?

To ensure that your responsive table looks good on both mobile and desktop devices, test it thoroughly on various screen sizes and devices. You may also want to consider using a mobile-first approach when designing your tables, where you prioritize making the table look great on smaller screens before optimizing for larger ones.

  1. What are some best practices for creating responsive tables in Java?

Some best practices for creating responsive tables in Java include:

  • Using an ArrayList or another collection to store the data
  • Generating the HTML code dynamically using a loop
  • Applying media queries to make the table responsive
  • Escaping special characters and properly formatting the generated HTML code
  • Testing the table on various devices and screen sizes to ensure it adapts correctly.
  1. How can I serve the generated HTML code to the client instead of writing it to a file?

To serve the generated HTML code to the client, you can use Servlets or JSP to write the output directly to the response stream. Alternatively, you can modify the example above to write the output to a StringWriter and then return that as a response from your servlet or JSP page.

Responsive Tables (Java) | Java | XQA Learn