A table of square numbers

exercise No. 74

A basic square number table Create comment in forum

Q:

Write an application which creates the following table of integer square numbers ( n 2 ):

n | n * n
--+------
0 | 0
1 | 1
2 | 4
3 | 9
4 | 16
5 | 25
6 | 36
7 | 49
8 | 64
9 | 81

Your solution is expected to be flexible: Sometimes a different limit of e.g. 12 rather than 9 in the above example is being desired. This rules an obvious «solution»:

public static void main(String[] args) {
  System.out.println("n | n * n");
  System.out.println("--+------");

  System.out.println(0 + " | " + 0);
  System.out.println(1 + " | " + 1);
             ...
  System.out.println(9 + " | " + 81);
}

Tip

Use a loop printing the table's body values.

A:

The table head my be copied from the code snippet. In addition we require a loop printing the table's body:

public static void main(String[] args) {

  System.out.println("n | n * n");                 // Printing the table's head
  System.out.println("--+------");

  for (int i = 0; i <= 9; i++) {                   // Printing the table's body
            System.out.println(i + " | " + i * i);
  }
}

exercise No. 75

Tidy up the mess! Create comment in forum

Q:

Running the previous code for values beyond 9 suffers from ugly formatting:

n | n * n
--+------
0 | 0
1 | 1
 ...
8 | 64
9 | 81
10 | 100
11 | 121
12 | 144
...
19 | 361
20 | 400

Modify your code by:

  1. introducing a single integer constant to define the number of values to be printed (i.e. 20 in the above example).

  2. Right indent all integer values being printed.

Your application's output shall look like:

 n | n * n
---+------
  0|     0
  1|     1
...
  8|    64
  9|    81
 10|   100
 11|   121
...
 19|   361
 20|   400

Tip

Read the track Formatting Numeric Print Output and learn how to style numeric output.

A:

The key difference is replacing System.out.println(...) statements by System.out.format(...):

public static void main(String[] args) {

  final int LIMIT = 20;               // The number of records to be printed

  System.out.println(" n | n * n");   // Printing the table's head
  System.out.println("---+------");

  for (int i = 0; i <= LIMIT; i++) {  // Printing the table's body

    System.out.format("%3d|%6d\n",   // Format string
                            i , i * i);   // Values being inserted in above format
  }                                   // string.
}

exercise No. 76

HTML-ify me Create comment in forum

Q:

Modify the previous code to generate HTML output instead of pure text and watch the result in a WEB browser:

<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
      <title>A square table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>n</th><th>n * n</th>
      </tr>
      <tr>
        <td style='text-align: right;'>0</td><td style='text-align: right;'>0</td>
      </tr>
      <tr>
        <td style='text-align: right;'>1</td><td style='text-align: right;'>1</td>
      </tr>
      <tr>
        <td style='text-align: right;'>2</td><td style='text-align: right;'>4</td>
      </tr>
     ...
    </table>
  </body>
</html>

A:

public static void main(String[] args) {

  final int LIMIT = 20;               // The number of records to be printed

  System.out.print(
        ""    + "<html xmlns='http://www.w3.org/1999/xhtml'>\n"
              + "  <head>\n"
              + "    <title>A square table</title>\n"
              + "  </head>\n"
              + "  <body>\n"
              + "    <table>\n");


  System.out.println("      <tr>");
  System.out.println("        <th>n</th><th>n * n</th>");
  System.out.println("      </tr>");

  for (int i = 0; i <= LIMIT; i++) {  // Printing the table's body

    System.out.println("      <tr>");
    System.out.println("        <td style='text-align: right;'>" + i +
                       "</td><td style='text-align: right;'>" + i * i + "</td>");
    System.out.println("      </tr>");

    }
  System.out.print(
              ""    + "    </table>\n"
                    + "  </body>\n"
                    + "</html>\n");
}

exercise No. 77

Auxiliary Example, part 1: A multiplication table Create comment in forum

Q:

In order to prepare a more sophisticated square number table we supply a slightly different exercise producing a multiplication table:

 * |    1    2    3    4    5    6    7    8    9   10
---+--------------------------------------------------
  1|    1    2    3    4    5    6    7    8    9   10
  2|    2    4    6    8   10   12   14   16   18   20
  3|    3    6    9   12   15   18   21   24   27   30
  4|    4    8   12   16   20   24   28   32   36   40
  5|    5   10   15   20   25   30   35   40   45   50
  6|    6   12   18   24   30   36   42   48   54   60
  7|    7   14   21   28   35   42   49   56   63   70
  8|    8   16   24   32   40   48   56   64   72   80
  9|    9   18   27   36   45   54   63   72   81   90
 10|   10   20   30   40   50   60   70   80   90  100

The number of rows and columns are equal. Provide an appropriate parameter final int LIMIT = ... so that your implementation works for different values just by changing its value.

Tip

You'll need an inner loop nested within an outer one like:

for (int y = 0; ...){

   for (int x = 0; ... ) {
      ...
   }
}

A:

public static void main(String[] args) {

  final int LIMIT = 10;                     // Parameter is subject to change.

  System.out.print(" * |  ");

  for (int col = 1; col <= LIMIT; col++) {   // Header line of columns ranging
    System.out.format("%3d  ", col);        // from 1 to LIMIT.
  }
  System.out.println();

  System.out.print("---+");                   // Header / table body separator.
  for (int col = 1; col <= LIMIT; col++) {
    System.out.print("-----");
  }
  System.out.println();

  for (int row = 1; row <= LIMIT; row++) {    // Printing rows.
    System.out.format("%3d|  ", row);
    for (int col = 1; col <= LIMIT; col++) { // Printing columns.
      System.out.format("%3d  ", row * col);
    }
    System.out.println();
  }
}

exercise No. 78

Auxiliary Example, part 2: Avoiding redundant entries Create comment in forum

Q:

It does not make sense to supply both results like e.g. 3 * 4 and 4 * 3. Modify your application to generate:

  1|    1
  2|    2    4
  3|    3    6    9
  4|    4    8   12   16
  5|    5   10   15   20   25
  6|    6   12   18   24   30   36
  7|    7   14   21   28   35   42   49
  8|    8   16   24   32   40   48   56   64
  9|    9   18   27   36   45   54   63   72   81
 10|   10   20   30   40   50   60   70   80   90  100
---+--------------------------------------------------
 * |    1    2    3    4    5    6    7    8    9   10

A:

We have to move the header to the table's bottom. Apart from that the required change with respect to your previous exercise is tiny: The inner loop must end when reaching the current row's index:

final int LIMIT = 10;                        // Parameter is subject to change.

for (int row = 1; row <= LIMIT; row++) {     // Printing rows.
  System.out.format("%3d|  ", row);

  for (int col = 1; col <= row; col++) { // Printing column values until row index only.
    System.out.format("%3d  ", row * col);
  }
  System.out.println();
}
System.out.print("---+");                    // Header / table body separator.
  for (int col = 1; col <= LIMIT; col++) {
    System.out.print("-----");
  }
  System.out.println();
  System.out.print(" * |  ");

  for (int col = 1; col <= LIMIT; col++) {     // Header line of columns ranging
    System.out.format("%3d  ", col);          // from 1 to LIMIT.
  }
System.out.println();

exercise No. 79

Creating a real square table Create comment in forum

Q:

The last square number table solution is only appropriate for smaller amounts of data. Growing numbers of elements require rearranging values in blocks in order to limit wasting space:

  n |  n*n       n |  n*n       n |  n*n       n |  n*n       n |  n*n
----+--------------+--------------+--------------+--------------+----------
  0 |    0      20 |  400      40 | 1600      60 | 3600      80 | 6400
  1 |    1      21 |  441      41 | 1681      61 | 3721      81 | 6561
  2 |    4      22 |  484      42 | 1764      62 | 3844      82 | 6724
  3 |    9      23 |  529      43 | 1849      63 | 3969      83 | 6889
  4 |   16      24 |  576      44 | 1936      64 | 4096      84 | 7056
  5 |   25      25 |  625      45 | 2025      65 | 4225      85 | 7225
  6 |   36      26 |  676      46 | 2116      66 | 4356      86 | 7396
  7 |   49      27 |  729      47 | 2209      67 | 4489      87 | 7569
  8 |   64      28 |  784      48 | 2304      68 | 4624      88 | 7744
  9 |   81      29 |  841      49 | 2401      69 | 4761      89 | 7921
----+--------------+--------------+--------------+--------------+----------
 10 |  100      30 |  900      50 | 2500      70 | 4900      90 | 8100
 11 |  121      31 |  961      51 | 2601      71 | 5041      91 | 8281
 12 |  144      32 | 1024      52 | 2704      72 | 5184      92 | 8464
 13 |  169      33 | 1089      53 | 2809      73 | 5329      93 | 8649
 14 |  196      34 | 1156      54 | 2916      74 | 5476      94 | 8836
 15 |  225      35 | 1225      55 | 3025      75 | 5625      95 | 9025
 16 |  256      36 | 1296      56 | 3136      76 | 5776      96 | 9216
 17 |  289      37 | 1369      57 | 3249      77 | 5929      97 | 9409
 18 |  324      38 | 1444      58 | 3364      78 | 6084      98 | 9604
 19 |  361      39 | 1521      59 | 3481      79 | 6241      99 | 9801

Building a table this way requires additional parameters:

  • The number of blocks in x-direction (5 in the above example)

  • The number of blocks in y-direction (2 in the above example)

  • The number of entries per block (10 in the above example)

You may have to nest three loops within each other.

A:

public static void main(String[] args) {

final int
  numBlocksHorizontal = 5,
  numBlocksVertical = 2,
  entriesPerBlock = 10;

  final int numRows = numBlocksVertical * entriesPerBlock;

  for (int x = 0; x < numBlocksHorizontal; x++) {       // Creating the overall
                                                        // table's head section
    System.out.print("  n |  n*n     ");
  }
  System.out.println();
  for (int y = 0;                                        // Blocks stacked below
           y < numBlocksVertical; y++) {                 // another
    for (int x = 0;                                      // Supplementary separator
          x < numBlocksHorizontal; x++) {                // between two vertically
                                                         // adjacent blocks
      System.out.print("----+----------");
    }
    System.out.println();
    for (int yBlock = 0;                                 // Stepping through values
               yBlock < entriesPerBlock; yBlock++) {     // vertically ...
      for (int x = 0; x < numBlocksHorizontal; x++) {    // and horizontally
                                                         // within each line.
        final int cellValue = y * entriesPerBlock
                           + x * numRows + yBlock;       // The individual value
                                                         // to be squared.
        System.out.format("%3d | %4d     ",              // Pretty print output
                      cellValue, cellValue * cellValue); // values.
      }
      System.out.println();
    }
  }
}

exercise No. 80

Creating a sophisticated HTML version of your square table Create comment in forum

Q:

A HTML of version of the previous square number table may look like squareTable.html. Inspect this generated HTML 5 code and modify your console output from the previous exercise in order to produce identical or similar HTML code. The expected outcome is:

Depending on your advance in HTML and CSS you may want to postpone this exercise until HTML and CSS have been thoroughly covered in related lectures.

Tip

The HTML standard allows for quoting of attribute values either by double or by single quotes:

  • <col span="2"/>

  • <col span='2'/>

The latter is more convenient when being embedded in Java code since it does not interfere with string literal delimiters:

System.out.print("<col span='2'/>\n");

rather than the more clumsy:

System.out.print("<col span=\"2\"/>\n");

A:

The following solution uses CSS style definitions in the generated HTML's header section being referenced from the document's body.

public static void main(String[] args) {

  final int numBlocksHorizontal = 5, numBlocksVertical = 2, entriesPerBlock = 10;

  final int numRows = numBlocksVertical * entriesPerBlock;

  System.out.print("" + "<html xmlns='http://www.w3.org/1999/xhtml'>\n"
            + "  <head>\n" + "    <title>A square table</title>\n" + "    <style>\n"
            + "      table, th, td {border: 1px solid black;}\n"
            + "      table {border-collapse: collapse;}\n"
            + "      td {text-align: right;}\n"
            + "      .greyColumn {background-color:LightGray;}\n"
            + "      </style>\n" + "  </head>\n" + "  <body>\n" + "    <table>\n"
            + "      <colgroup>\n");

  for (int x = 0; x < numBlocksHorizontal; x++) {               // Creating the overall
                                                                // table's head section
    if (0 == x % 2) {
      System.out.println("        <col span='2'/>");
    } else {
      System.out.println("        <col span='2' class='greyColumn'/>");
    }
  }
  System.out.println("      </colgroup>");

  System.out.println("      <tr>");
  for (int x = 0; x < numBlocksHorizontal; x++) {             // n | n^2 header line    
                                                           
    System.out.println("        <th>n</th><th>n * n</th>");
  }
  System.out.println("      </tr>");

  System.out.println();
  for (int y = 0; y < numBlocksVertical; y++) {               // Blocks stacked below
                                                              // another

    System.out.println(                                       // Block separating
               "      <tr><td></td></tr>");                   // extra row.

    for (int yBlock = 0;
               yBlock < entriesPerBlock; yBlock++) {          // Stepping through
                                                              // values vertically ...
      System.out.println("      <tr>");
      for (int x = 0; x < numBlocksHorizontal; x++) {         // and horizontally
                                                              // within each line.

        final int cellValue = 1 + yBlock                      // The individual
                         + x * numRows + y * entriesPerBlock; // value to be squared.

        System.out.println(                                   // Pretty print output
                     "        <td>" + cellValue + "</td><td>" // values.
                     + cellValue * cellValue + "</td>");
      }
      System.out.println("      </tr>");
    }
  }
  System.out.print("" + "    </table>\n" + "  </body>\n" + "</html>\n");
}