#### A table of square numbers

No. 74

##### A basic square number table

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);
}
}

No. 75

##### Tidy up the mess!

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

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.
}

No. 76

##### HTML-ify me
 Q: Modify the previous code to generate HTML output instead of pure text and watch the result in a WEB browser:  A square table
nn * n
00
11
24
...  A: public static void main(String[] args) { final int LIMIT = 20; // The number of records to be printed System.out.print( "" + "\n" + " \n" + " A square table\n" + " \n" + " \n" + " \n"); System.out.println("
nn * n
" + i + "" + i * i + "
"); System.out.println(" "); System.out.println(" "); for (int i = 0; i <= LIMIT; i++) { // Printing the table's body System.out.println(" "); System.out.println(" "); System.out.println(" "); } System.out.print( "" + " \n" + " \n" + "\n"); }

No. 77

##### Auxiliary Example, part 1: A multiplication table

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();
}
}

No. 78

##### Auxiliary Example, part 2: Avoiding redundant entries
 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();

No. 79

##### Creating a “real” square table
 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 | 9801Building 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(); } } }

No. 80

##### Creating a sophisticated HTML version of your square table

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
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");
}