Visual Studio Code. Table Colors.


Page sections

1-13 A 1 The background color of a table 1-13 A 2 Discover 1-13 A 3 1-13 A 4 1-13 A 5 1-13 A 6 1-13 A 7 Cats 1-13 A 8 Dogs 1-13 A 9 Birds 1-13 A 10 Music 1-13 A 11 Games 1-13 A 12 VegetablesAndFruits 1-13 A 13 DreamsAndReality 1-13 A 14 BooksAndMovies 1-13 A 15 Your own HTML file 1-13 A 16 Rereading the yellow sections 1-13 A 17 StarfruitJuice13.html 1-13 Example 1: The background color of a table 1-13 Example 2: Overriding background colors I 1-13 Example 3: Overriding background colors II 1-13 Example 4: Child tags overriding the property values of their parent tags 1-13 Explanation 1: Setting the tab size in Visual Studio Code 1-13 Explanation 2: Setting the font size in Visual Studio Code 1-13 Explanation 3: Turning off sticky scroll in Visual Studio Code 1-13 Explanation 4: Turning off popups when hovering over code in Visual Studio Code 1-13 Explanation 5: Step 1 - Selecting the "Exercises01" Folder 1-13 Explanation 6: Step 2 - Opening the "Exercises01" Folder 1-13 Explanation 7: Step 3 - Clicking the "Explorer" button 1-13 Explanation 8: Step 4 - Selecting the "New File…" menu item 1-13 Explanation 9: Step 5 - Writing the HTML file name 1-13 Explanation 10: Step 6 - Saving the empty HTML file 1-13 Explanation 11: Step 7 - Writing "html:5" 1-13 Explanation 12: Step 8 - Saving the modified HTML file 1-13 Explanation 13: Step 9 - Closing the "Welcome" tab 1-13 Explanation 14: The background color of a table 1-13 Explanation 15: The background color of a table row 1-13 Explanation 16: Style hierachies 1-13 Explanation 17: Child tags overriding the property values of their parent tags 1-13 Orientation 1: Using Visual Studio Code 1-13 Orientation 2: Creating an HTML file in Visual studio code 1-13 Orientation 3: Using Visual Studio Code 1-13 Orientation 4: The background color of a table 1-13 Orientation 5: Parent and child tags 1-13 Orientation 6: Color table cells

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-13 Orientation 1: Using Visual Studio Code

Download and install Visual Studio Code. Make sure to configure the settings outlined in the following three sections

1-13 Explanation 1: Setting the tab size in Visual Studio Code

To set the tab size, follow these steps:
  1. on the bottom left click the circular Manage icon:
          

  1. click Settings
  2. in Settings, search for: tabsize
  3. in the first search result, Editor: Tab Size, change the tab size from 4 to 2


1-13 Explanation 2: Setting the font size in Visual Studio Code

To set the font size, follow these steps:
  1. on the bottom left click the circular Manage icon:
          

  1. click Settings
  2. in Settings, search for: Editor: Font Size
  3. in the first search result, Editor: Font Size, change the font size to 20


1-13 Explanation 3: Turning off sticky scroll in Visual Studio Code

To turn off sticky scroll (for version 1.87.1 or higher), follow these steps:
  1. in Settings, search for: sticky
  2. find: Editor: Sticky Scroll: Enabled
  3. untick: Editor: Sticky Scroll: Enabled

1-13 Explanation 4: Turning off popups when hovering over code in Visual Studio Code

To turn off popups when hovering over code (for version 1.87.1 or higher), follow these steps:

  1. open Settings
  2. search for: env.windows
  3. in: Terminal > Integrated > Env: Windows, click: Edit in settings.json
  4. add a blank line above line 2. The new blank line now becomes line 2.
  5. in the new line 2 write:
    "editor.hover.enabled": false,
    Note that the quotes are included, and that the line ends with a comma and not with a semicolon.
  6. save the file
          

1-13 Orientation 2: Creating an HTML file in Visual studio code

The following steps show how to create an HTML file in Visual Studio Code.

1-13 Explanation 5: Step 1 - Selecting the "Exercises01" Folder

  1. open Visual Studio Code
  2. in the top left corner, click the File menu
  3. in the File menu, select Open Folder…
  4. select the Exercises01 folder

1-13 Explanation 6: Step 2 - Opening the "Exercises01" Folder

Click the Select Folder button.          

1-13 Explanation 7: Step 3 - Clicking the "Explorer" button

Click the Explorer button in the vertical bar on the top left.          

1-13 Explanation 8: Step 4 - Selecting the "New File…" menu item

  1. in the top left corner, open the File menu
  2. select New File…

1-13 Explanation 9: Step 5 - Writing the HTML file name

In the File Name Input Box write: ExerciseName.html          

1-13 Explanation 10: Step 6 - Saving the empty HTML file

  1. press the Enter key
  2. in the Create File window, click the Create File button

1-13 Explanation 11: Step 7 - Writing "html:5"

  1. in the Editor Area, write html:5
  2. press the Enter key
  3. delete <!DOCTYPE html>
  4. delete the two <meta> tag pairs
          

1-13 Explanation 12: Step 8 - Saving the modified HTML file

  1. press the Enter key 2 times
  2. open the File menu
  3. click Save - alternatively, you can press the Ctrl + S keys to save the file

1-13 Explanation 13: Step 9 - Closing the "Welcome" tab

If open, close the Welcome tab.

1-13 Orientation 3: Using Visual Studio Code

Although you can still use Notepad++ to create HTML files, Visual Studio Code should be the preferred editor from now on.

1-13 Orientation 4: The background color of a table

The following steps cover how to apply a background color to tables.

1-13 A 1 The background color of a table

In the Exercises01 folder, use Visual studio code to create an HTML file with these lines of code:

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;background-color:yellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

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

</body>
</html>

Open this file in a browser and explain the following line of code:

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

1-13 Explanation 14: The background color of a table

To set the color of a table, assign a property value to the background-color property in the style declaration of the opening tag of the table tag pair:
<table style="background-color:property value;"></table>

1-13 Example 1: The background color of a table


<table style="border-width:5px;border-style:solid;border-color:blue;background-color:greenyellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

</table>

will display this table:

Hello. Hello.
Hello. Hello.

1-13 A 2 Discover

In the Exercises01 folder, create an HTML file with these lines of code:
<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;background-color:yellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

              <tr style="background-color:turquoise;">
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

</body>
</html>

Open this file in a browser and explain the difference between
<table style="border-width:5px;border-style:solid;border-color:blue;background-color:yellow;">
and
<tr style="background-color:turquoise;">:





































1-13 Explanation 15: The background color of a table row

To set the color of a table row, assign a property value to the background-color property in the style declaration within the opening <tr> tag, like this:
<tr style="background-color:property value;"></tr>

1-13 Example 2: Overriding background colors I

Note, that in the following example:

<html>
<body>

<table>
             <tr style="background-color:turquoise;">
                     <td style="border-width:4px; border-style:solid;border-color:red;background-color:white;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;background-color:yellow;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>
</table>

</body>
<html>

 the styles set in in the table data tags <td> override the style set in the tr tag <tr>:

Hello. Hello. Hello. Hello.


1-13 Example 3: Overriding background colors II

The following lines of code:

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;background-color:yellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

              <tr style="background-color:greenyellow;">
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;background-color:white;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

</body>
<html>

will display this table:

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

The background-color style: background-color:greenyellow of the table row tag for the second row overrides the background-color style:yellow of the table tag.
Additionally, the background-color style background-color:white of the third table data tag in the second row overrides the background-color style:greenyellow of the table row tag.


1-13 Explanation 16: Style hierachies

In tables, the styles set in…
  1. a table data tag override the styles set in its corresponding table row tag and in the table tag
  2. a table row tag override the styles set in the table tag

1-13 A 3

Using the greenyellow and turquoise property values, create an HTML file that will display this table:

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


1-13 A 4

Using the names in these table cells as property values for the cells' background colors, create an HTML file that will display this table:

turquoise greenyellow
lavenderblush gold


1-13 Orientation 5: Parent and child tags

Review the Parent and child tags section on page 7.

1-13 A 5

Take a look at the following table:

<html>
<body>

<table>
             <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
             <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
             <tr>
                     <td>Hello.</td>
                     <td>Hello.</td>
                     <td>Hello.</td>
             </tr>
</table>

</html>
</body>

Explain in detail the relationship between these tags:

<table>
<tr>
<td>

In your explanation use the terms "parent tags" and "child tags" to clarify their hierachical relationship:

 

If any of the correct answers below are not included in your response, incorporate them into your explanations, using your own words.

 
Yes
No
  
The <tr> tags are parent tags of the <td> tags.
The table tags are parent tags of the <tr> tags.
the <tr> tags are parent tags of the <table> tags.
The <tr> tags are child tags of the <td> tags.
The <table> tags are <child> tags of the <tr> tags.
The <td> tags are child tags of the <tr> tags.


1-13 Explanation 17: Child tags overriding the property values of their parent tags

In a table, the property values of the child tags override the property values of the parent tags:

<>
     <></>
     <></>
</>


1-13 Example 4: Child tags overriding the property values of their parent tags

In the table below, the background-color value: GreenYellow of the <table> tag applies to all of its <tr> child tags. However, the background-color property value of the last <tr> tag overrides the background-color value of its parent tag with the Turquoise property value.

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


<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;background-color:GreenYellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

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

              <tr style="background-color:Turquoise;" >
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>
</table>

</body>
</html>

1-13 A 6

Create an HTML file that will display this table:

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


1-13 Orientation 6: Color table cells

In the Exercises01 folder, create a copy of the corresponding previous HTML file for each of the following eight exercises. Rename each copied HTML file, using the exercise numbers of the following exercises. Use these color names to add colors to the table cells, ensuring they harmonize well with each other. Use subtle color variations or create well-aligned contrasts that enhance the overall look without disturbing the composition.

1-13 A 7 Cats

Enhance the table cells of the most recent cats file you have created with colors.

1-13 A 8 Dogs

Enhance the table cells of the most recent dogs file you have created with colors.

1-13 A 9 Birds

Enhance the table cells of the most recent birds file you have created with colors.

1-13 A 10 Music

Enhance the table cells of the most recent music file you have created with colors.

1-13 A 11 Games

Enhance the table cells of the most recent games file you have created with colors.

1-13 A 12 VegetablesAndFruits

Enhance the table cells of the most recent VegetablesAndFruits file you have created with colors.

1-13 A 13 DreamsAndReality

Enhance the table cells of the most recent DreamsAndReality file you have created with colors.

1-13 A 14 BooksAndMovies

Enhance the table cells of the most recent BooksAndMovies file you have created with colors.

1-13 A 15 Your own HTML file

Enhance the table cells of the most recent file you created with colors.

1-13 A 16 Rereading the yellow sections

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

1-13 A 17 StarfruitJuice13.html

  1. save StarfruitJuice12.html as StarfruitJuice13.html
  2. modify StarfruitJuice13.html to make it look like this.

For the new colors use the following property values:

  1. khaki
  2. bisque
  3. gold
  4. cornsilk

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

Solution proposals

 

1-13 A 3

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;background-color:greenyellow;">
              <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>

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

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

              <tr style="background-color:turquoise;" >
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">Hello.</td>
             </tr>
</table>

</body>
</html>



 

1-13 A 4

<body>

<table style="border-width:5px;border-style:solid;border-color:blue;">
             <tr>
                     <td style="border-width:4px; border-style:solid;border-color:red;background-color:turquoise;">turquoise</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;background-color:greenyellow;">greenyellow</td>
             </tr>

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

</body>
</html>


 

1-13 A 6

<html>
<body>

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

 <tr>
         <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
         <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
         <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
 </tr>

<tr style="border-width:5px; border-style:solid; border-color:red;">
         <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
         <td style="border-width:5px; border-style:solid; border-color:red;background-color:yellow">Hello</td>
         <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
 </tr>

<tr style="border-width:5px; border-style:solid; border-color:red;">
       <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
       <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>
       <td style="border-width:5px; border-style:solid; border-color:red;">Hello</td>

 </tr>

</table>

</body>
</html>



 

1-13 A 17

Untitled Document

<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 second row and left 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;background-color:cornsilk;">

<!- - 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>

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

<!- - Linking an image into the first row and second column of the table. - ->
                               <img src="images/StarfruitJuice.jpg">
                       </td>
              </tr>

<!- - Placing heading, title and unordered list into the third 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;background-color:bisque;">

<!- - 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>

<!- - 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;background-color:gold;">

<!- - 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