Tables. Online HTML Editor.


Page sections

1-11 A 1 Online HTML editor 1-11 A 2 Discover 1-11 A 3 3 rows and 3 columns 1-11 A 4 2 rows and 3 columns 1-11 A 5 3 rows and 2 columns 1-11 A 6 Discover 1-11 A 7 Discover 1-11 A 8 Discover 1-11 A 9 Discover 1-11 A 10 Discover 1-11 A 11 Discover 1-11 A 12 1-11 A 13 Discover 1-11 A 14 Discover 1-11 A 15 Discover 1-11 A 16 1 Row, 2 columns 1-11 A 17 Discover 1-11 A 18 1 column, 2 rows 1-11 A 19 1-11 A 20 1-11 A 21 1-11 A 22 1-11 A 23 1-11 A 24 1-11 A 25 1-11 A 26 1-11 A 27 1-11 A 28 1-11 A 29 1-11 A 30 1-11 A 31 1-11 A 32 1-11 A 33 Rereading the yellow sections 1-11 B 1 1-11 B 2 StarfruitJuice10a.html 1-11 B 3 Cats 1-11 B 4 Dogs 1-11 B 5 Birds 1-11 B 6 Music 1-11 B 7 Games 1-11 B 8 VegetablesAndFruits 1-11 B 9 DreamsAndReality 1-11 B 10 BooksAndMovies 1-11 B 11 Your own HTML file 1-11 B 12 StarfruitJuice11.html 1-11 C 1 1-11 C 2 1-11 C 3 1-11 C 4 1-11 C 5 1-11 C 6 1-11 Definition 1: Table 1-11 Definition 2: The table tag pair 1-11 Definition 3: Table row tag pair 1-11 Definition 4: Table data tag pair 1-11 Definition 5: Pixel 1-11 Example 1: Table 1-11 Example 2: Organizing texts in tables 1-11 Example 3: Inheritance of font-styles in tables 1-11 Example 4: Border patterns of the table tag and of the table data tag 1-11 Example 5: Squares that make up an image 1-11 Example 6: Border width 1-11 Example 7: Border color 1-11 Example 8: Styles for borders and text colors 1-11 Example 9: Indenting table tag pairs 1-11 Example 10: 1 row, 2 columns 1-11 Example 11: 1 column, 2 rows 1-11 Example 12: Row and Column 1-11 Example 13: The vertical alignment of table cell data 1-11 Explanation 1: Tables and texts 1-11 Explanation 2: Organizing texts in tables 1-11 Explanation 3: Three steps to construct a table 1-11 Explanation 4: Building a table: step 1 1-11 Explanation 5: Building a table: step 2 1-11 Explanation 6: Table row tag pair 1-11 Explanation 7: Building a table: step 3 1-11 Explanation 8: Table content 1-11 Explanation 9: Basic structure of a table 1-11 Explanation 10: Inheritance of font-styles in tables 1-11 Explanation 11: Visible border 1-11 Explanation 12: Border pattern for the table tag and for the table data tag 1-11 Explanation 13: Border patterns of the table tag and of the table data tag 1-11 Explanation 14: Image 1-11 Explanation 15: Border width 1-11 Explanation 16: Border color 1-11 Explanation 17: Border styles 1-11 Explanation 18: Invisible borders 1-11 Explanation 19: Default values for border color and size in a table 1-11 Explanation 20: Indenting table tag pairs 1-11 Explanation 21: Text in the table data tag 1-11 Explanation 22: Windows arrangement for using the Online HTML Editor 1-11 Explanation 23: Row and Column 1-11 Explanation 24: The vertical alignment of table cell data 1-11 Orientation 1: Tables 1-11 Orientation 2: Online HTML editor 1-11 Orientation 3: Background color of the online editor 1-11 Orientation 4: Using the online editor for the following exercises 1-11 Orientation 5: Border colors for the following tables 1-11 Orientation 6: Purpose of C-type exercises 1-11 Orientation 7: Preparatory file 1-11 Orientation 8: Tables for structuring text 1-11 Submit 1: StarfruitJuice11.html

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-11 Orientation 1: Tables

Tables are useful for structuring the content of an HTML page. This page begins by covering how tables are used to organize text.

1-11 Example 1: Table

Here is an example of how a table is used to organize texts:

Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2


1-11 Definition 1: Table

A table is an arrangement of text in rows and columns.

1-11 Explanation 1: Tables and texts

Tables can be used to arrange texts in rows and columns.

1-11 Example 2: Organizing texts in tables

This disorganized text:

Cats are pets. They often purr. Sparrows often chirp. They can fly fast. Cats like to chase mice. Their claws can be withdrawn. Parrots are birds. They have colorful feathers. Dogs are also pets. They often bark. Sparrows are birds. They have small wings. Dogs like to play fetch. They are known for their loyalty. Parrots can mimic sounds. They like to sit on branches.

can be organized in this table:

Cats Dogs Birds
Cats are pets. Dogs are also pets. Sparrows are birds.
They often purr. They often bark. They have small wings.
Cats like to chase mice. Dogs like to play fetch. Sparrows often chirp.
They can withdraw their claws. They are known for their loyalty. They can fly fast.
Cats enjoy climbing. Dogs are good guard animals. Parrots have colorful feathers.
They groom themselves regularly. They love companionship. Parrots can mimic sounds.
They move skillfully and smoothly. Dogs vary in size and breed. Parrots like to sit on branches.


1-11 Explanation 2: Organizing texts in tables

Using tables to organize texts into rows and columns allows you to separate the texts by category. This makes it easier to read and understand the text, allowing the reader to quickly compare information and grasp the relationships and differences between the various categories.

1-11 Orientation 2: Online HTML editor

Continue using Notepad++ as you have been. Additionally, use this online HTML editor to quickly preview and evaluate the results of your code:
https://www.tutorialspoint.com/online_html_editor.php


1-11 A 1 Online HTML editor

  1. open the editor
  2. In the left pane you will see code that is similar to the code below. You might notice that the editor displalys the code in different colors - that is normal.

<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>This is real time online HTML Editor</p>
</body>
</html>

  1. delete that code
  1. write the following code into the left pane:

<html>

<body>
     <p style="color:red; font-size:30px;">
         This is a little text.
     </p>x
</body>

</html>

  1. click the Preview button on the top
          

  1. change the paragraph tag like this: <p style="color:yellow; font-size:20px;">This is a little text.</p>
  2. click the Preview button again to observe how the changes appear


1-11 Orientation 3: Background color of the online editor

If the online editor has a black background, switch to a white background for the following exercises. To do so, click the Toggle Dark/Light Theme button in the top right corner.

1-11 A 2 Discover

Type these lines of code into the online HTML editor:

<html>
<body>

<!-- Table 1 -->
<table>
          <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
</table>

<br>

<!-- Table 2 -->
<table>
              <tr>
                      <td>Hello.</td>
              </tr>
              <tr>
                     <td>Hello.</td>
             </tr>
</table>

</body>
</html>


Open this file in a browser and explain these tag pairs:
  1. Table tag pair: <table ></table>
  2. Table row tag pair: <tr></tr>
  3. Table data tag pair: <td></td>

In your explanation, use the names for the 3 tag pairs.





































1-11 Definition 2: The table tag pair

This tag pair: <table></table> is called the table tag pair.

1-11 Explanation 3: Three steps to construct a table

When constructing a table, the following three essential steps must be followed every time.

1-11 Explanation 4: Building a table: step 1

To build a table, begin with the table tag pair:

<table>

</table>

1-11 Definition 3: Table row tag pair

This tag pair: <tr></tr> is called the table row tag pair.

1-11 Explanation 5: Building a table: step 2

In a table, the table tag pair contrains the table row tag pair:

<table>
              <tr>

              </tr>
</table>

1-11 Explanation 6: Table row tag pair

In a table with texts, table row tag pair: <tr></tr> is used to arrange table data in rows.

1-11 Definition 4: Table data tag pair

This tag pair: <td></td> tag pair is called the table data tag pair.

1-11 Explanation 7: Building a table: step 3

In a table, table row tag pairs contain table data tag pairs.

<table>
              <tr>
                       <td></td>
              </tr>
</table>

1-11 Explanation 8: Table content

In a table with texts, table data tag pairs are used to enclose table data, such as text: <td>text</td>.

1-11 Explanation 9: Basic structure of a table

For every table you create, start with the following basic structure:

<table>
              <tr>
                       <td></td>
              </tr>
</table>

Once this structure is complete, you can add your content and extend it as needed.

1-11 Orientation 4: Using the online editor for the following exercises

For each of the following exercises, begin by typing your code into the online editor. Once complete, copy the code into Notepad++ and save the file with the corresponding exercise number without the spaces.

1-11 A 3 3 rows and 3 columns

Create an HTML file, that displays Hello. in 3 rows and in 3 columns:

Hello. Hello. Hello.
Hello. Hello. Hello.
Hello. Hello. Hello.


1-11 A 4 2 rows and 3 columns

Create an HTML file, that displays Hello. in 2 rows and in 3 columns:

Hello. Hello. Hello.
Hello. Hello. Hello.


1-11 A 5 3 rows and 2 columns

Create an HTML file, that displays Hello. in 3 rows and in 2 columns:

Hello. Hello.
Hello. Hello.
Hello. Hello.


1-11 A 6 Discover

Create an HTML file with this code:

<table style="border-style:solid;border-width:5px;border-color:lightblue;
                    font-family:'Times New Roman'; font-size:20px; color:blue ;">

               <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>
</table> 


Predict what you will see if you open this file in a browser. Please enter your thoughts and their reasons here:



1-11 A 7 Discover

Copy the code from the previously created HTML file into a new HTML file. Then adjust it to convert it into the following code:

<table style="border-style:solid;border-width:5px;border-color:lightblue;
                    font-family:'Times New Roman'; font-size:20px; color:blue ;">

               <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:turquoise;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:yellowgreen;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>
</table> 


Predict what colors you will see if you open this file in a browser. Please enter your thoughts and their reasons here:



1-11 A 8 Discover

Copy the code from the previously created HTML file into a new HTML file. Then adjust it to convert it into the following code:

<table style="border-style:solid;border-width:5px;border-color:lightblue;
                    font-family:'Times New Roman'; font-size:20px; color:blue ;">

               <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:turquoise;font-family:Courier;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:yellowgreen; font-family:Consolas;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>
</table> 


Predict each of the two font families you will see if you open this file in a browser. Please enter your thoughts and their reasons here:

1-11 A 9 Discover

Copy the code from the previously created HTML file into a new HTML file. Then adjust it to convert it into the following code:

<table style="border-style:solid;border-width:5px;border-color:lightblue;
                    font-family:'Times New Roman'; font-size:20px; color:blue ;">

               <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:turquoise;font-family:Courier;font-size:10px;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:yellowgreen; font-family:Consolas;font-size:10px;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>
</table> 


Predict each of the three font sizes you will see if you open this file in a browser. Please enter your thoughts and their reasons here:



1-11 A 10 Discover

Copy the code from the previously created HTML file into a new HTML file. Then adjust it to convert it into the following code:

<table style="border-style:solid;border-width:5px;border-color:lightblue;
                    font-family:Arial; font-size:25px; color:cyan;">

               <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:turquoise;font-family:Courier;font-size:10px;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;
                    color:yellowgreen; font-family:Consolas;font-size:10px;">
                    This is a little text.
                     </td>
             </tr>

              <tr>
                    <td style="border-style:solid;border-width:2px;border-color:red;">
                    This is a little text.
                     </td>
             </tr>
</table> 


Why does this not change the fonts in the first two rows of the table? Please enter your thoughts and their reasons here:



1-11 Example 3: Inheritance of font-styles in tables

In the tables of the previous exercises, the <td> tags inherit these font styles from the parent <table> tag:

  • font-family
  • font-size
  • color

1-11 Explanation 10: Inheritance of font-styles in tables

In a table, the <td> tags inherit all of their font styles from the parent <table> tag:

  • font-family
  • font-size
  • color
  • font-weight
  • font-style
  • text-decoration

1-11 A 11 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<html>
<body>

<table style="border-style:solid;">
            <tr>
                    <td>This is a little text.</td>
                    <td>This is another little text.</td>
            </tr>
</table>

</body>
</html>



Open the file in a browser and explain: <td style="border-style:solid;>:




































1-11 Explanation 11: Visible border

To make table border visible, set the border-style property in the table to the property value solid:

<table style="border-style:solid;"></table>
This is a little text. This is another little text.

1-11 A 12

Create an HTML file, that displays Hello. in 3 rows and in 3 columns in a table with visible borders:

Hello. Hello. Hello.
Hello. Hello. Hello.
Hello. Hello. Hello.


1-11 A 13 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<html>
<body>

<table style="border-style:solid;">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 

</body>
</html>



Open the file in a browser and explain <td style="border-style:solid;>:




































1-11 Explanation 12: Border pattern for the table tag and for the table data tag

To set the border pattern of the table tag pair: <table></table>, or of the table data tag pair: <td></td>, use this style declaration: border-style:property value.

<table border-style:property value></table>
<td border-style:property value></td>


1-11 Example 4: Border patterns of the table tag and of the table data tag

<table style="border-style:solid;">
            <tr>
                    <td style="border-style:dotted;">This is a little text.</td>
                    <td style="border-style:dashed;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.

1-11 Explanation 13: Border patterns of the table tag and of the table data tag

Untitled Document Some values of the border-style property values are:
  • solid
  • dotted
  • dashed

1-11 Example 5: Squares that make up an image

This image is made up of a definite number of squares, each of which comes in one of 4 different colors:
         

1-11 Definition 5: Pixel

One of the small dots or squares that make up an image on a computer screen is called a pixel. The term pixel is a contraction of "picture element." It is a combination of "picture", shortened to "pix", and "element", shortened to "el".

1-11 Explanation 14: Image

An image is made up of many pixels.

1-11 A 14 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<html>
<body>

<table style="border-width:5px;border-style:solid;">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 

</body>
</head>



Open the file in a browser and explain: border-width:5px:

1-11 Explanation 15: Border width

To set the border width of a table or its cells, use the following style declaration: border-width:property value;

1-11 Example 6: Border width

<table style="border-width:10px; border-style:solid;">
            <tr>
                    <td style="border-style:dotted;">This is a little text.</td>
                    <td style="border-width:5px;border-style:dashed;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.

1-11 A 15 Discover

<html>
<body>

<table style="border-width: 5px;border-style:solid;border-color:blue">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 

</body>
</head>



Open the file in a browser and explain border-color:blue:




































1-11 Explanation 16: Border color

To set the border color, use the border-color style declaration:
border-color:property value;

1-11 Example 7: Border color

<table style="border-width: 5px;border-style:solid;border-color:blue;">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;border-color:magenta;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.

1-11 Explanation 17: Border styles

Every table contains one table tag pair: <table></table>, and at least one table row tag pair: <tr></tr>, and at least one table data tag pair: <td></td>.
The borders of the table and table data tag pairs can be designed with the following three attributes:
  • border width in pixels: border-width
  • border pattern: border-style
  • border color: border-color

1-11 Example 8: Styles for borders and text colors

Here, the default table styles are overridden by the border-width and border-color styles:

<table style="border-style:solid;border-width:10px;border-color:blue;">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.


Here, the color:red style is inherited by by the border and the text of the table data child elements :

<table style="border-style:solid;border-width:10px;border-color:blue;color:red;">
            <tr>
                    <td style="border-style:solid;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.


Here, the border of the first table data child element is overridden by its boder-solid and border-width styles:

<table style="border-style:solid;border-width:10px;border-color:blue;color:red;">
            <tr>
                    <td style="border-style:solid;border-width:5px;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.


Here, the border styles of the first table data child element are overridden by their boder-solid, border-width and border-color styles:

<table style="border-style:solid;border-width:10px;border-color:blue;color:red;">
            <tr>
                    <td style="border-style:solid;border-width:5px;border-color:yellowgreen;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.


Here, the text of the first table data child element is overridden by their boder-solid, border-width, border-color and color styles:

<table style="border-style:solid;border-width:10px;border-color:blue;color:red;">
            <tr>
                    <td style="border-style:solid;border-width:5px;border-color:yellowgreen;color:black;">This is a little text.</td>
                    <td style="border-style:solid;">This is another little text.</td>
            </tr>
</table> 
This is a little text. This is another little text.

1-11 Explanation 18: Invisible borders

If the border-style is not specified, then the default values for border-color and border-width cannot be set, and the table's borders will become invisible. Note, that even in a table with invisble borders, the table and its borders still exist - they are just invisible:

<table>
            <tr>
                    <td>This is a little text.</td>
            </tr>
</table> 
This is a little text.  

1-11 Explanation 19: Default values for border color and size in a table

If the border-style attribute value is specified, but the border-color and border-width attribute values are not specified, then the border color will default to black, and the border width will default to 2px.

1-11 Explanation 20: Indenting table tag pairs

When creating a table, remember to indent the <tr></tr> and <td></td> tag pairs. This makes your code easier to read.

1-11 Example 9: Indenting table tag pairs

Instead of writing:

<table>
<tr>
<td>
data
</td>
</tr>

<tr>
<td>
data
</td>
</tr>
</table>

write:

<table>
             <tr>
                     <td>
                     data
                     </td>
             </tr>

             <tr>
                     <td>
                     data
                     </td>
             </tr>
</table>

1-11 Example 10: 1 row, 2 columns

The following example is a table structure to arrange texts in 1 row and 2 columns:

<table>
             <tr>
                     <td>
                     text
                     </td>

                     <td>
                     text
                     </td>
             </tr>
</table>

1-11 Explanation 21: Text in the table data tag

The table data tag can be written in two ways, like this:
<td>text</td>

or like this:
<td>
text
</td>

The first form is easier to understand for short text. Use the second form for longer text.


1-11 Explanation 22: Windows arrangement for using the Online HTML Editor

For each of the following exercises, arrange the HTML workbook window on the left and the Online HTML Editor window on the right as represented here:          

1-11 Orientation 5: Border colors for the following tables

For the following tables, set the blue border width to 5px and the red border width to 4px.

1-11 A 16 1 Row, 2 columns

Create this table:

Row 1, Column 1 Row 1, Column 2


1-11 A 17 Discover

Create an HTML file with these lines :

<html>
<body>

<table style="border-width:4px; border-style:solid; border-color:black">

             <tr>
                     <td style="border-width:2px; border-style:solid; border-color:lightgray" >
                     This is a little text.
                     </td>
            </tr>  

             <tr>
                     <td style="border-width:2px; border-style:solid; border-color:lightgray" >
                     This is another little text.
                     </td>
             </tr>

</table>

</body>
</html>
Open the file in a browser and explain the <tr></tr> tag pair:




































1-11 Example 11: 1 column, 2 rows

The following example is a table structure to arrange texts in 1 column and 2 rows:

<table>
             <tr>
                     <td>
                     text
                     </td>
             </tr>

             <tr>
                     <td>
                     text
                     </td>
             </tr>
</table>

1-11 A 18 1 column, 2 rows

Create an HTML file that displays this table:


Row 1, Column 1
Row 2, Column 1


1-11 Explanation 23: Row and Column

In the following exercises R stands for row and C stands for column.

1-11 Example 12: Row and Column

R1 stands for row 1. C1 stands vor column 1.

1-11 A 19

Create an HTML file that displays this table:

R1C1 R1C2
R2C1 R2C2
R3C1 R3C2


1-11 A 20

Create an HTML file that displays this table:

R1C1 R1C2 R1C3
R2C1 R2C2 R2C3


1-11 B 1

Create an HTML file that displays this table:

R1C1 R1C2 R1C3 R1C4 R1C5
R2C1 R2C2 R2C3 R2C4 R2C5
R3C1 R3C2 R3C3 R3C4 R3C5


1-11 Orientation 6: Purpose of C-type exercises

The pupose of the following C-type exercises is to:

  • familiarize you in-depth with handling rows and columns in tables
  • sharpen your concentration
  • train your ability to persevere

1-11 C 1

Create an HTML file that displays this table:

This is a little text. R1C2 R1C3
R2C1 R2C2 R2C3
R3C1 This is a little text. R3C3
R4C1 R4C2 R4C3
R5C1 R5C2 This is a little text.


1-11 C 2

Create an HTML file that displays the table below. Where they are given, apply the property values for the font families, the pixel values for the the font sizes, and the color names for the fonts.

Courier, 25px, Blue R1C2 R1C3
R2C1 R2C2 R2C3
Arial, 17px,DarkOrange Verdana, 17px, DarkViolet Consolas, 17px, Turquoise
R4C1 R4C2 R4C3
R5C1 R5C2 Times New Roman, 17px, YellowGreen


1-11 C 3

Create an HTML file that displays the table below. Apply the given color names and pixel values to the borders' colors and widths.

red, 4px turquoise, 7px blueviolet, 8px
darkblue, 8px royalblue, 6px powderblue, 4px
red, 2px salmon, 6px sienna, 8px
thistle, 2px silver, 2px navajowhite, 8px
midnightblue, 3px turquoise, 7px indigo, 8px


1-11 C 4

Create an HTML file that displays the table below.

This is a little text. turquoise, 7px blueviolet, 8px thistle, 2px midnightblue, 3px
darkblue, 8px royalblue, 6px powderblue, 4px silver, 2px turquoise, 7px
red, 2px salmon, 6px sienna, 8px navajowhite, 8px indigo, 8px


1-11 C 5

Create an HTML file that displays the table below.

blueviolet, 8px turquoise, 7px This is a little text. midnightblue, 3px thistle, 2px
turquoise, 7px darkblue, 8px royalblue, 6px powderblue, 4px silver, 2px
salmon, 6px navajowhite, 8px red, 2px sienna, 8px indigo, 8px


1-11 C 6

Create an HTML file that displays the table below.

blueviolet, 8px turquoise, 7px This is a little text. midnightblue, 3px
salmon, 6px navajowhite, 8px red, 2px sienna, 8px indigo, 8px
turquoise, 7px darkblue, 8px royalblue, 6px powderblue, 4px silver, 2px thistle, 2px


1-11 A 21

Create an HTML file that displays this table:

  1. Coffee
  2. Tea
  3. Milk
  1. Butter
  2. Cheese
  3. Eggs


1-11 A 22

Create an HTML file that displays this table:

Vehicles

  1. Car
  2. Bus
  3. Train

Fruits

Nuts are fruits

  • Almonds
  • Cashews


1-11 A 23

Create an HTML file that displays this table:

Fruits

Nuts are fruits

  • Almonds
  • Cashews

Vehicles

  1. Car
  2. Bus
  3. Train
  4. Bicycle
  5. Boat
  6. Plane
  7. Ferry
  8. Ski lift
  9. Kayak


1-11 Explanation 24: The vertical alignment of table cell data

To specify the vertical alignment of table cell data, set the vertial-align property to top, middle or bottom.

<td style="vertical-align:property value">


1-11 Example 13: The vertical alignment of table cell data

In this example, the vertical alignment of table cell data is set to bottom:

<table style="height:200px;width:200px; border-style:solid; border-width:5px;border-color:black;">
             <tr>
                     <td style="vertical-align:bottom;border:2px; border-style:solid;border-color:red;">Hello.</td>
             </tr>
</table>
Hello.

1-11 A 24

  • within the StarfruitJuiceFiles folder, create a copy of the HTML file you created for the previous exercise
  • save the copy with the number of this exercise
  • modify the file to display this table:

Fruits

Nuts are fruits

  • Almonds
  • Cashews

Vehicles

  1. Car
  2. Bus
  3. Train
  4. Bicycle
  5. Boat
  6. Plane
  7. Ferry
  8. Ski lift
  9. Kayak


1-11 Orientation 7: Preparatory file

The next section asks you to create StarfruitJuice10a.html.
It is a preparatory exercise for the creation of StarfruitJuice11.html in the last section of this page.

1-11 B 2 StarfruitJuice10a.html

  1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice10.html file
  2. rename the copy of the StarfruitJuice10.html file to StarfruitJuice10a.html

At this point you have 2 identical files, named StarfruitJuice10.html and StarfruitJuice10a.html.

  1. modify StarfruitJuice10a.html so it looks like this.
  2. save StarfruitJuice10a.html

1-11 A 25

Create an HTML file that displays this table:

R1C1 R1C2 R1C3
R2C1


1-11 A 26

Create an HTML file that displays this table:

R1C1 R1C2
R2C1 R2C2


1-11 A 27

Create an HTML file that displays this table:

R1C1
R2C1 R2C2 R2C3


1-11 A 28

Create an HTML file that displays this table:

R1C1
R2C1
R3C1
R4C1


1-11 A 29

Create an HTML file that displays this table:

R1C1 R2C2
R2C1
R3C1


1-11 A 30

Create an HTML file that displays this table:

R1C1
R2C1 R2C2
R3C1


1-11 A 31

Create an HTML file that displays this table:

R1C1
R2C1 R2C2
R3C1


1-11 A 32

Create an HTML file that displays this table:

R1C2
R2C1 R2C3
R3C2


1-11 Orientation 8: Tables for structuring text

In the Exercises01 folder, create a copy of the corresponding previous HTML file for each of the following eight exercises, and rename each copied HTML file, using the exercise numbers of the following exercises. Apply tables with visible borders to organize the text and headings of each file.

1-11 B 3 Cats

Enhance the most recent cats file you have created by adding tables.

1-11 B 4 Dogs

Enhance the most recent dogs file you have created by adding tables.

1-11 B 5 Birds

Enhance the most recent birds file you have created by adding tables.

1-11 B 6 Music

Enhance the most recent music file you have created by adding tables.

1-11 B 7 Games

Enhance the most recent games file you have created by adding tables.

1-11 B 8 VegetablesAndFruits

Enhance the most recent VegetablesAndFruits file you have created by adding tables.

1-11 B 9 DreamsAndReality

Enhance the most recent DreamsAndReality file you have created by adding tables.

1-11 B 10 BooksAndMovies

Enhance the most recent BooksAndMovies file you have created by adding tables.

1-11 B 11 Your own HTML file

Enhance the most recent file you created with your own content by adding tables.

1-11 A 33 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections.

1-11 B 12 StarfruitJuice11.html

  1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice10a.html file
  2. rename the copy of the StarfruitJuice10a.html file to StarfruitJuice11.html

At this point you have 2 identical files, named StarfruitJuice10a.html and StarfruitJuice11.html.

  1. using the <span></span> tag pair for the 2 new titles, modify StarfruitJuice11.html to make it look like this.
  2. save StarfruitJuice11.html

1-11 Submit 1: StarfruitJuice11.html

Click here.

This page was created by Hanspeter Amend
Previous page   Table of contents

Solution proposals

 

1-11 A 3

<html>
<body>

<!-- table with 3 rows and 3 columns -->
<table>

<!-- First row: containing 3 times Hello-->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Second row: containing 3 times Hello -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Third row: containing 3 times Hello -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 4

<html>
<body>

<!-- table with 2 rows and 3 columns -->
<table>

<!-- First row: containing 3 times Hello-->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Second row: containing 3 times Hello -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

</table>

</body>
</html>



 

1-11 A 5

<html>
<body>

<!-- table with 3 rows and 2 columns -->
<table>

<!-- First row: containing 3 times Hello-->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Second row: containing 3 times Hello -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Third row: containing 3 times Hello -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 12

<html>
<body>

<!-- table with 3 rows -->
<table style="border-style:solid;">

<!-- First row: containing three times Hello.-->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Second row: containing three times Hello. -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
            </tr>

<!-- Third row: containing three times Hello. -->
            <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 16

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Row 1, Column 1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Row 1, Column 2</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 18

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;"> Row 1, Column 1</td>
             </tr>

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Row 2, Column 1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 19

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 2 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

<!-- Row 2 with 2 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>

<!-- Row 3 with 2 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>

</table>

</body>
</html>



 

1-11 A 20

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 3 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C3</td>
             </tr>

<!-- Row 2 with 3 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C3</td>
             </tr>
</table>

</body>
</html>



 

1-11 B 1

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 5 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:green;">R1C1</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R1C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C3</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R1C4</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C5</td>
             </tr>

<!-- Row 2 with 5 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:dashed;border-color:red;">R2C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:green;">R2C3</td>
                     <td style="border-width:4px; border-style:dashed;border-color:red;">R2C4</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C5</td>
             </tr>

<!-- Row 3with 5 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C1</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R3C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C3</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R3C4</td>
                     <td style="border-width:4px; border-style:solid ;border-color:green;">R3C5</td>
             </tr>
</table>

</body>
</html>



 

1-11 C 1

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:green;">

<!-- Row 1 with 3 columns -->
             <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R1C2</td>
                     <td style="border-width:3px; border-style:dashed;border-color:blue;">R1C3</td>
             </tr>

<!-- Row 2 with 3columns -->

             <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R2C1</td>
                     <td style="border-width:5px; border-style:dashed;border-color:blue;">R2C2</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R2C3</td>
             </tr>

<!-- Row 3with 3 columns -->

             <tr>
                     <td style="border-width:7px; border-style:dashed;border-color:blue;">R3C1</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:7px; border-style:solid;border-color:blue;">R3C3</td>
             </tr>

<!-- Row 4 with 3 columns -->

             <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R4C1</td>
                     <td style="border-width:5px; border-style:solid;border-color:blue;">R4C2</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R4C3</td>
             </tr>

<!-- Row 5 with 3columns -->

             <tr>
                     <td style="border-width:3px; border-style:solid;border-color:blue;">R5C1</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R5C2</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;">This is a little text.</td>
             </tr>
</table>

</body>
</html>



 

1-11 C 2

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:Green;">

<!-- Row 1 with 3 columns -->
              <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-family:Courier;font-size:25px;text-decoration:underline;color:Blue;">Courier, 25px, Blue                     
                    </td>
                    <td style="border-width:4px; border-style:dotted;border-color:red;">R1C2</td>
                    <td style="border-width:3px; border-style:dashed;border-color:blue;">R1C3</td>
            </tr>

<!-- Row 2 with 3columns -->
             <tr>
                    <td style="border-width:4px; border-style:dotted;border-color:red;">R2C1 </td>
                    <td style="border-width:5px; border-style:dashed;border-color:blue;">R2C2</td>
                    <td style="border-width:4px; border-style:dotted;border-color:red;">R2C3</td>
            </tr>

<!-- Row 3with 3 columns -->
              <tr>
                       <td style="border-width:7px; border-style:dashed;border-color:blue;font-family:Arial;font-size:17px;color:darkorange;">Arial, 17px,DarkOrange </td>
                       <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-family:Verdana;font-size:17px;text-decoration:underline;color:DarkViolet;">Verdana, 17px, DarkViolet</td>
                       <td style="border-width:7px; border-style:solid;border-color:blue;font-family:Consolas;font-size:20px;color:Turquoise;">Consolas, 17px, Turquoise</td>
               </tr>

<!-- Row 4 with 3 columns -->
               <tr>
                      <td style="border-width:4px; border-style:dotted;border-color:red;">R4C1</td>
                      <td style="border-width:5px; border-style:solid;border-color:blue;">R4C2</td>
                      <td style="border-width:4px; border-style:dotted;border-color:red;">R4C3</td>
              </tr>

<!-- Row 5 with 3columns -->
              <tr>
                     <td style="border-width:3px; border-style:solid;border-color:blue;">R5C1</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;">R5C2</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;font-family:'Times New Roman';font-size:17px;font-style:italic;color:YellowGreen;">Times New Roman, 17px, YellowGreen </td>
             </tr>
</table>

</html>
</body>

 

1-11 C 3

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:green;">

<!-- Row 1 with 3 columns -->
             <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;">turquoise, 7px</td>
                     <td style="border-width:8px; border-style:dotted;border-color:blueviolet;font-weight:bold;text-decoration:underline;">blueviolet, 8px</td>
             </tr>

<!-- Row 2 with 3 columns -->

             <tr>
                     <td style="border-width:8px; border-style:dashed;border-color:darkblue;text-decoration:underline;">darkblue, 8px</td>
                     <td style="border-width:6px; border-style:dashed;border-color:royalblue;font-style:italic;text-decoration:underline;">royalblue, 6px </td>
                     <td style="border-width:4px; border-style:dashed; 4px ;border-color:powderblue;font-weight:bold;text-decoration:underline;">powderblue, 4px</td>
             </tr>

<!-- Row 3 with 3 columns -->

             <tr>
                     <td style="border-width:2px; border-style:solid;border-color:red;font-style:italic;">red, 2px</td>
                     <td style="border-width:6px; border-style:solid;border-color:salmon;font-weight:bold;text-decoration:underline;">salmon, 6px</td>
                     <td style="border-width:7px; border-style:solid;border-color:sienna;">sienna, 8px</td>
             </tr>

<!-- Row 4 with 3 columns -->

             <tr>
                     <td style="border-width:2px; border-style:dashed;border-color:thistle;font-weight:bold;text-decoration:underline;">thistle, 2px</td>
                     <td style="border-width:2px; border-style:dotted;border-color:black;font-style:italic;text-decoration:underline;">silver, 2px</td>
                     <td style="border-width:8px; border-style:solid;border-color:navajowhite;font-weight:bold;">navajowhite, 8px</td>
             </tr>

<!-- Row 5 with 3 columns -->

             <tr>
                     <td style="border-width:3px; border-style:solid;border-color:midnightblue;font-weight:bold;font-style:italic;">midnightblue, 3px</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;text-decoration:underline;">turquoise, 7px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:indigo;font-style:italic;">indigo, 8px</td>
             </tr>
</table>

</body>
</html>



 

1-11 C 4

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:green;">

<!-- Row 1 with 5 columns -->
             <tr>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;">turquoise, 7px</td>
                     <td style="border-width:8px; border-style:dotted;border-color:blueviolet;font-weight:bold;text-decoration:underline;">blueviolet, 8px</td>
                     <td style="border-width:2px; border-style:dashed;border-color:thistle;font-weight:bold;text-decoration:underline;">thistle, 2px</td>
                     <td style="border-width:3px; border-style:solid;border-color:midnightblue;font-weight:bold;font-style:italic;">midnightblue, 3px</td>
             </tr>

<!-- Row 2 with 5 columns -->

             <tr>
                     <td style="border-width:8px; border-style:dashed;border-color:darkblue;text-decoration:underline;">darkblue, 8px</td>
                     <td style="border-width:6px; border-style:dashed;border-color:royalblue;font-style:italic;text-decoration:underline;">royalblue, 6px </td>
                     <td style="border-width:4px; border-style:dashed; 4px ;border-color:powderblue;font-weight:bold;text-decoration:underline;">powderblue, 4px</td>
                     <td style="border-width:2px; border-style:dotted;border-color:black;font-style:italic;text-decoration:underline;">silver, 2px</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;text-decoration:underline;">turquoise, 7px</td>
             </tr>

<!-- Row 3 with 5 columns -->

             <tr>
                     <td style="border-width:2px; border-style:solid;border-color:red;font-style:italic;">red, 2px</td>
                     <td style="border-width:6px; border-style:solid;border-color:salmon;font-weight:bold;text-decoration:underline;">salmon, 6px</td>
                     <td style="border-width:7px; border-style:solid;border-color:sienna;">sienna, 8px</td>
                     <td style="border-width:8px; border-style:solid;border-color:navajowhite;font-weight:bold;">navajowhite, 8px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:indigo;font-style:italic;">indigo, 8px</td>
             </tr>
</table>

</body>
</html>



 

1-11 C 5

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:green;">

<!-- Row 1 with 5 columns -->
             <tr>
                     <td style="border-width:8px; border-style:dotted;border-color:blueviolet;font-weight:bold;text-decoration:underline;">blueviolet, 8px</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;">turquoise, 7px</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:3px; border-style:solid;border-color:midnightblue;font-weight:bold;font-style:italic;">midnightblue, 3px</td>
                     <td style="border-width:2px; border-style:dashed;border-color:thistle;font-weight:bold;text-decoration:underline;">thistle, 2px</td>
             </tr>

<!-- Row 2 with 5 columns -->

             <tr>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;text-decoration:underline;">turquoise, 7px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:darkblue;text-decoration:underline;">darkblue, 8px</td>
                     <td style="border-width:6px; border-style:dashed;border-color:royalblue;font-style:italic;text-decoration:underline;">royalblue, 6px </td>
                     <td style="border-width:4px; border-style:dashed; 4px ;border-color:powderblue;font-weight:bold;text-decoration:underline;">powderblue, 4px</td>
                     <td style="border-width:2px; border-style:dotted;border-color:black;font-style:italic;text-decoration:underline;">silver, 2px</td>
             </tr>

<!-- Row 3 with 5 columns -->

             <tr>
                     <td style="border-width:6px; border-style:solid;border-color:salmon;font-weight:bold;text-decoration:underline;">salmon, 6px</td>
                     <td style="border-width:8px; border-style:solid;border-color:navajowhite;font-weight:bold;">navajowhite, 8px</td>
                     <td style="border-width:2px; border-style:solid;border-color:red;font-style:italic;">red, 2px</td>
                     <td style="border-width:7px; border-style:solid;border-color:sienna;">sienna, 8px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:indigo;font-style:italic;">indigo, 8px</td>
             </tr>
</table>

</body>
</html>



 

1-11 C 6

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:green;">

<!-- Row 1 with 4 columns -->
             <tr>
                     <td style="border-width:8px; border-style:dotted;border-color:blueviolet;font-weight:bold;text-decoration:underline;">blueviolet, 8px</td>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;">turquoise, 7px</td>
                     <td style="border-width:4px; border-style:dotted;border-color:red;font-weight:bold;font-style:italic;text-decoration:underline;">This is a little text.</td>
                     <td style="border-width:3px; border-style:solid;border-color:midnightblue;font-weight:bold;font-style:italic;">midnightblue, 3px</td>
             </tr>

<!-- Row 3 with 5 columns -->

             <tr>
                     <td style="border-width:6px; border-style:solid;border-color:salmon;font-weight:bold;text-decoration:underline;">salmon, 6px</td>
                     <td style="border-width:8px; border-style:solid;border-color:navajowhite;font-weight:bold;">navajowhite, 8px</td>
                     <td style="border-width:2px; border-style:solid;border-color:red;font-style:italic;">red, 2px</td>
                     <td style="border-width:7px; border-style:solid;border-color:sienna;">sienna, 8px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:indigo;font-style:italic;">indigo, 8px</td>
             </tr>

<!-- Row 2 with 6 columns -->

             <tr>
                     <td style="border-width:7px; border-style:dotted;border-color:turquoise;text-decoration:underline;">turquoise, 7px</td>
                     <td style="border-width:8px; border-style:dashed;border-color:darkblue;text-decoration:underline;">darkblue, 8px</td>
                     <td style="border-width:6px; border-style:dashed;border-color:royalblue;font-style:italic;text-decoration:underline;">royalblue, 6px </td>
                     <td style="border-width:4px; border-style:dashed; 4px ;border-color:powderblue;font-weight:bold;text-decoration:underline;">powderblue, 4px</td>
                     <td style="border-width:2px; border-style:dotted;border-color:black;font-style:italic;text-decoration:underline;">silver, 2px</td>
                     <td style="border-width:2px; border-style:dashed;border-color:thistle;font-weight:bold;text-decoration:underline;">thistle, 2px</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 21

<html>

<body>

<!-- Table 2 rows and 1 column -->
<table style="border-width:5px;border-style:solid;border-color:blue;">
<!-- First row -->
                <tr>
                       <td style="border-width:4px; border-style:solid;border-color:red;">
                                 <ol>
                                         <li> Coffee</li>
                                         <li>Tea</li>
                                         <li>Milk</li>
                                 </ol>
                        </td>
                </tr>

<!-- Second row -->
                 <tr>
                           <td style="border-width:4px; border-style:solid;border-color:red;">
                                    <ol>
                                             <li> Butter</li>
                                             <li>Cheese</li>
                                             <li>Eggs</li>
                                    </ol>
                           </td>
                   </tr>
             <tr>
</table>
</body>

</html>




 

1-11 A 22

<html>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:blue;">

<tr>
<!- - Placing an ordered list into the first row and first column of the table. - ->
<td style="border-width:4px; border-style:solid;border-color:red;">
<h1 style="text-align:center;">Vehicles</h1>
         <ol style="list-style-type:lower-roman;font-size:110%;font-family:Verdana;">
                  <li>Car</li>
                  <li>Bus</li>
                  <li>Train</li>
         </ol>
</td>
</tr>

<tr>
<td style="border-width:4px;border-style:solid;border-color:red;">
<!- - Set style attribute for the second title. - ->

<h1 style="text-align:center;">Fruits</h1>
<!- - Set style attribute for font styles. - ->

<p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Consolas;font-size:150%;">Nuts are fruits</p>

<!- - Placing an unordered list into the first row and first column of the table. - ->
         <ul style="font-family:Arial;font-size:115%;list-style-type:upper-alpha;">
                  <li style="margin-bottom:6px;">Almonds</li>
                  <li style="margin-bottom:6px;">Cashews</li>
         </ul>
</td>

</tr>
</table>

</body>

</html>



 

1-11 A 23

<html>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:red;">

<tr>
<td style="border-width:4px;border-style:solid;border-color:blue;">
<!- - Set style attribute for the second title. - ->

<h1 style="text-align:center;">Fruits</h1>
<!- - Set style attribute for font styles. - ->

<p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Consolas;font-size:150%;">Nuts are fruits</p>

<!- - Placing an unordered list into the first row and first column of the table. - ->
           <ul style="font-family:Arial;font-size:115%;list-style-type:upper-alpha;">
                   <li style="margin-bottom:6px;">Almonds</li>
                   <li style="margin-bottom:6px;">Cashews</li>
          </ul>
</td>

<!- - Placing an ordered list into the first row and first column of the table. - ->
<td style="border-width:4px; border-style:solid;border-color:blue;">
<h1 style="text-align:center;">Vehicles</h1>
          <ol style="list-style-type:lower-roman;font-size:110%;font-family:Verdana;">
<li>Car</li>
<li>Bus</li>
                 <li>Train</li>
                 <li>Bicycle</li>
                 <li>Boat</li>
                 <li>Plane</li>
                 <li>Ferry</li>
                 <li>Ski lift</li>
                 <li>Kayak</li>
         </ol>
</td>

</tr>
</table>

</body>

</html>



 

1-11 A 24

<html>
<body>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:red;">

<tr>
<td style="border-width:4px;border-style:solid;border-color:blue;vertical-align:bottom;">
<!- - Set style attribute for the second title. - ->

<h1 style="text-align:center;">Fruits</h1>
<!- - Set style attribute for font styles. - ->

<p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Consolas;font-size:150%;">Nuts are fruits</p>

<!- - Placing an unordered list into the first row and first column of the table. - ->
           <ul style="font-family:Arial;font-size:115%;list-style-type:upper-alpha;">
                   <li style="margin-bottom:6px;">Almonds</li>
                   <li style="margin-bottom:6px;">Cashews</li>
          </ul>
</td>

<!- - Placing an ordered list into the first row and first column of the table. - ->
<td style="border-width:4px; border-style:solid;border-color:blue;">
<h1 style="text-align:center;">Vehicles</h1>
          <ol style="list-style-type:lower-roman;font-size:110%;font-family:Verdana;">
<li>Car</li>
<li>Bus</li>
                 <li>Train</li>
                 <li>Bicycle</li>
                 <li>Boat</li>
                 <li>Plane</li>
                 <li>Ferry</li>
                 <li>Ski lift</li>
                 <li>Kayak</li>
         </ol>
</td>

</tr>
</table>

</body>
</html>



 

1-11 B 2

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

<!- - Line break - ->
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!- - Paragraph - ->
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:blue;">

<!- - Placing the unordered list into the first row and first column of the table. - ->
             <tr>

<!- - First row and first column of the table. Set style attribute for background color style. - ->
                     <td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Set heading - ->
                     <h1>Starfruit Juice Recipe</h1>

<!- - Set style attribute for font styles. - ->
                             <p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

<!- - Set style attribute for list style and font styles. - ->
                             <ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
                                     <li>low calories</li>
                                     <li>supports metabolism</li>
                             </ul>
                     </td>
              </tr>

<!- - Placing heading, title and unordered list into the second row and first column of the table. - ->
              <tr>

<!- - Second row and first column of the table. Set style attribute for text and table styles. - ->
                     <td style="border-width:4px;border-style:solid;border-color:red;vertical-align:top;">

<!- - Set style attribute for the second title. - ->
<p style="text-align:center;font-size:150%;font-family:'Times New Roman';">Ingredients</p>

<!- - Ordered list. Set style attributes for font styles and for spacing style between list items.- ->
                           <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
                                      <li style="margin-bottom:6px;">3 starfruits</li>
                                      <li style="margin-bottom:6px;">1 cup of water</li>
                                      <li style="margin-bottom:6px;">1 cilantro leaf</li>
                                      <li style="margin-bottom:6px;">3 mint leaves</li>
                                      <li style="margin-bottom:6px;">2 cups of water</li>
                                      <li>some cinnamon</li>
                             </ol>
                     </td>
              </tr>
</table>

</body>

</html>



 

1-11 A 25

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 3 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C3</td>
             </tr>

<!-- Row 2with 1column -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 26

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">
<!-- Row 1 with 2 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

<!-- Row 2 with 2 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 27

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 1column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
             </tr>

<!-- Row 2 with 3 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C3</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 28

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 in 1 column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
             </tr>

<!-- Row 2 in the same column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
             </tr>

<!-- Row 3 in the same column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C1</td>
             </tr>

<!-- Row 4 in the same column -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R4C1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 29

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 2 columns -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>

<!-- Row 2 with 1 column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
             </tr>

<!-- Row 3 with 1 column -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 30

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 1 column -->
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>7
             </tr>

<!-- Row 2 with 2 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>

<!-- Row 3 with 1 column -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 31

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 1 column -->
             <tr>
                     <td></td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C1</td>7
             </tr>

<!-- Row 2 with 2 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C2</td>
             </tr>

<!-- Row 3 with 3 columns -->

             <tr>
                     <td></td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C1</td>
             </tr>
</table>

</body>
</html>



 

1-11 A 32

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">

<!-- Row 1 with 1 column -->
             <tr>
                     <td></td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

<!-- Row 2 with 2 columns -->

             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
                     <td></td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C3</td>
             </tr>

<!-- Row 3 with 3 columns -->

             <tr>
                     <td></td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R3C2</td>
             </tr>
</table>

</body>
</html>



 

1-11 B 12

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

<!- - Line break - ->
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!- - Paragraph - ->
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:blue;">

<!- - Placing the unordered list into the first row and first column of the table. - ->
             <tr>

<!- - First row and first column of the table. Set style attribute for background color style. - ->
                     <td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Set heading - ->
                     <h1>Starfruit Juice Recipe</h1>

<!- - Set style attribute for font styles. - ->
                             <p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

<!- - Set style attribute for list style and font styles. - ->
                             <ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
                                     <li>low calories</li>
                                     <li>supports metabolism</li>
                             </ul>
                     </td>
              </tr>

<!- - Placing heading, title and unordered list into the second row and first column of the table. - ->
              <tr>

<!- - Second row and first column of the table. Set style attribute for text and table styles. - ->
                     <td style="border-width:4px;border-style:solid;border-color:red;vertical-align:top;">

<!- - Set style attribute for the second title. - ->
                      <p style="text-align:center;font-size:150%;font-family:'Times New Roman';">Ingredients</p>

<!- - Ordered list. Set style attributes for font styles and for spacing style between list items.- ->
                           <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
                                      <li style="margin-bottom:6px;">3 starfruits</li>
                                      <li style="margin-bottom:6px;">1 cup of water</li>
                                      <li style="margin-bottom:6px;">1 cilantro leave</li>
                                      <li style="margin-bottom:6px;">3 mint leaves</li>
                                      <li style="margin-bottom:6px;">2 cups of water</li>
                                      <li>some cinnamon</li>
                             </ol>
                     </td>

<!- - Second row and second column of the table. Set style attribute for background color style and width style. - ->
                     <td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Set style attribute with styles for for the third title and subtitle. - ->
                               <p style="text-align:center;">

<!- - Set style attribute for font styles. - ->  
                               <span style="font-family:'Times New Roman';font-size:200%;font-weight:bold;font-style:italic;text-decoration:underline;">Preparation of Starfruit Juice</span>
                              <br>

<!- - Set style attribute for font styles. - ->  
                              <span style="font-family:'Times New Roman';font-size:150%">Set up a blender.</span>
                              </p>

<!- - Ordered list. Set style attributes for font style and for spacing between list items style.- ->
                                <ol style="font-family:'Times New Roman';font-size:150%;list-style-type:decimal;">
                                         <li style="margin-bottom:2px;">Blend the starfruits in the blender</li>
                                         <li style="margin-bottom:2px;">Pour fresh water and blend until smooth</li>
                                         <li style="margin-bottom:2px;">Add mint, cilantro leaves and cinnamon to taste and blend for another second</li>
                                         <li>Serve in a glass</li>
                                </ol>                       
                      </td>
              </tr>
</table>

</body>

</html>

This page was created by Hanspeter Amend Previous page   Table of contents