Table Sizes, Borders and Alignments

1-15 A 1 Discover

Displayed below is the code for the tables thereafter:

<html>
<body>

<table style="border-width:5px;border-style:solid;border-color:blue;width:100%;">
             <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>

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

R1C1 R1C2

R2C1 R2C2

R1C1 R1C2

R2C1 R2C2

Explain the width property:

1-15 Example 1: The width of a table

This example shows two different width values:

</table>

R1C1	R1C2
R2C1	R2C2

R1C1	R1C2
R2C1	R2C2

1-15 Explanation 1: The width of a table

To specify the width of a table, set the width property of the width style in the table tag pair to a property value between "0%" and "100%":

<table style="width:property value%;"> where n stands for a value between 0% and 100% of the page width.

100% is the maximum width available.

1-15 A 2

Create an HTML file that shows these tables:

R1C1	R1C2
R2C1	R2C2

R1C1	R1C2
R2C1	R2C2

R1C1	R1C2
R2C1	R2C2

1-15 A 3 Discover

The following code can be used to create the two tables thereafter:

<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;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

1-15 Example 2: The horizontal position of a table

In this example, the left border of the lower table is shifted 30% to the right of the upper table's width:

</table>

R1C1	R1C2
R2C1	R2C2

R1C1	R1C2
R2C1	R2C2

1-15 Explanation 2: The horizontal position of a table

The margin-left property sets the distance between the left page border and the left table border. To align a table, set the margin-left property in the table's style attribute to a value between 0% and 100%:

1-15 A 4

Create an HTML file that shows this table, which is shifted from the left margin of the page to the right by 70% of the page's width.

R1C1	R1C2
R2C1	R2C2

1-15 Example 3: The width of a table cell

In this example, the width of the left cell is 80% of the table's width:

R1C1

R1C2

1-15 Explanation 3: The width of a table cell

The width property sets a table's width. To define the table width, set the width property in the style attribute of the table tag to a value between 0% and 100%:

1-15 B 1

This is the HTML for the table below:

<html>
<body>
<table style="width:60%;margin-left:20%;border:5px;border-style:solid;border-color:blue;">
              <tr style="height:50px;">
                      <td style="border-style:solid;border-color:red;"></td>
                      <td style=" border-style:solid;border-color:red;"></td>
              </tr>
</table>
</body>
</html>

Create an HTML file with updated code to display this table:

80%

1-15 A 5 Discover

The following code can be used to create the table thereafter:
<html>

<body>
<table style="width:40%;margin-left:30%;border:5px;border-style:solid;border-color:blue;">
             <tr style="height:70px">
                     <td style="vertical-align:bottom;border:4px; border-style:solid;border-color:red;width:70%;">R1C1</td>
                     <td style="text-align:right;vertical-align:top;border:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

R1C1	R1C2
R2C1	R2C2

Open this code in a browser and explain the positions of the table content, emphasizing the distinction between the "center" and "middle" values:

1-15 Example 4: 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>

R1C1

1-15 Explanation 4: The vertical alignment of table cell data

To specify the vertical alignment of table cell data, set the vertial-align property of the style attribute in the table tag pair to top, middle or bottom:

1-15 Example 5: The horizontal alignment of table cell data

In this example, the horizontal alignment of table cell data is set to right:

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

R1C1

1-15 Explanation 5: The horizontal alignment of table cell data

To specify the horizontal alignment of the data of data in a table cell, set the text-align property of the style attribute in the table tag pair to left, center or right:

1-15 Example 6: The 'middle' and 'center' values for the alignment of table cell data

In this example, the vertical alignment is set using the vertical-alignment property, while the horizontal alignment is set using the text-alignment property:

R1C1

R2C1

1-15 Explanation 6: The 'middle' and 'center' values

middle sets the vertical alignment.
center sets the text alignment which is also the horizontal alignment.

1-15 Example 7: Justifying text

In this example, the text alignment is set using the justify property value for the text-align property:

<table width="50%" style="border-style:solid;border-color:black;">
              <tr>
                    <td>
HTML pages have been designed with the help of experts, so that they may be written in many different languages with different characters and can still be transported easily around the world. This has already been accomplished several decades ago.
                     </td>
              </tr>
</table>

HTML pages have been designed with the help of experts, so that they may be written in many different languages with different characters and can still be transported easily around the world. This has already been accomplished several decades ago.

<table width="50%" style="border-style:solid;border-color:black;text-align:justify;">
              <tr>
                    <td>
HTML pages have been designed with the help of experts, so that they may be written in many different languages with different characters and can still be transported easily around the world. This has already been accomplished several decades ago.
                     </td>
              </tr>
</table>

1-15 Explanation 7: Justifying text

To justify text, use: <tr style="text-align:justify;"></tr>.

1-15 A 6

Create an HTML file that shows this text within this table:

Thinking about your website not only makes you more creative but also helps you understand how it works. Figuring out how the code you imagine fits with the website you picture makes your creative skills even better. Changing the design in your mind all the time is like practicing and getting better at being creative.

1-15 A 7 Discover

Displayed below is the code for the table and its position thereafter :

R1C1	R1C2
R2C1	R2C2

Modifying the first line as follows:

<table style="margin-left:70%;border:5px;border-style:solid;border-color:blue;border-spacing:7px;">

will make the table look like this:

R1C1	R1C2
R2C1	R2C2

Explain this style: "border-spacing:7px"

1-15 Example 8: Setting space between cell borders

In this example, the border-spacing property value is set to 10 pixels:

R1C1	R1C2
R2C1	R2C2

1-15 Explanation 8: Setting the space between cell borders

To set the space between all of the table borders, set the border-spacing property in the style attribute of the table tag pair: <table style="border-spacing:property value;"> to the desired space in px.

1-15 A 8

Create an HTML file with the following specifications, displaying the table thereafter:

the width of the whole table is 40% of the page width
the width of the table's left column is 20% of the whole table's width
the width of the table's central column is 60% of the whole table's width
the width of the table's right column is 20% of the whole table's width
the height of the row is 100 px
the left margin offset is 20%
the distance between all borders is 2 px
the table border is 5 px
the width of the borders of the rows and columns is 3 px

R1C1

R1C2

R1C3

1-15 A 9

copy the file of the previous exercise
save the copy with the name of this exercise
modify the copy to set the height of the two new rows to 80 px and 70 px
modify the table to make it look like this:

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3
R4C1	R4C2	R4C3

1-15 A 10

copy the file of the previous exercise
save the copy with the name of this exercise
modify the copy to set the height of the second last row to 60 px
omit the height style for the last row
modify the table to make it look like this this:

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3
R4C1	R4C2	R4C3
R5C1	R5C2	R5C3
R6C1	R6C2	R6C3

1-15 A 11 Discover

The following code can be used to create the two tables thereafter:

<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;">R1C1</td>
                     <td style="border-width:4px; border-style:solid;border-color:red;">R2C1</td>
             </tr>

R1C1 R1C2

R2C1 R2C2

R1C1 R1C2

R2C1 R2C2

Explain the effect of removing the styles.

1-15 Example 9: Invisible table borders

Table with borders:	<table style="border-style:solid;border-width:5px;border-color:blue;"> … </table>
Table without borders:	<table > … </table>
Table cell with borders:	<td style="border-style:solid;border-width:5px;border-color:blue;"> … </td>
Table cell without borders:	<td> … </td>

1-15 Explanation 9: Making table borders invisible

To display a table without showing its borders, remove the border-style style from the table tags and table data tags.
Without the border-style style, you should also remove the border-width and border-color styles.
Note that the borders do indeed continue to exist - they are simply made invisible.

1-15 A 12

copy file from the exercise just before the last two exercises
save the copy with the name of this exercise
modify the table:

R1C1

R1C2

R1C3

to make it look like this:

R1C1

R1C2

R1C3

1-15 B 2

within the StarfruitJuiceFiles folder, create a copy of the file of a previous exercise displaying the table below:

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3

rename the copy with the name of this exercise
modify the table of the HTML file as follows: the width of the left column should be 70% of the table's width, and the width of the cell's border should be 4 px; making the table look like the table below:

R1C1	R1C2
R2C1	R2C2

1-15 B 3

within the StarfruitJuiceFiles folder, create a copy of the file of the previous exercise displaying the table below:
rename the copy with the name of this exercise
modify the table of the HTML file making the table look like the table below:

R1C1	R1C2
R2C1	R2C2

1-15 A 13 StarfruitJuice14a.html

save StarfruitJuice14.html as StarfruitJuice14a.html
modify StarfruitJuice14a.html, so it looks like this.

1-15 Explanation 10: Removing the space between the cells' borders

To remove the space between the table cells' borders, set the border-spacing property of the style attribute in the table tag pair to 0px:
<table style="border-spacing:0px;">.

1-15 Example 10: Removing the space between the cells' borders

In this example, the border-spacing property value is set to 10 pixels:

R1C1	R1C2
R2C1	R2C2

Setting the border-spacing property to 0 pixels removes the space between the table cells' borders:

R1C1	R1C2
R2C1	R2C2

1-15 Explanation 11: Combining borders into a single border

To combine boders into a single border, set the borde-collapse property of the style attribute in the table tag pair to collapse:
<table style="border-collapse:collapse;">.

1-15 Orientation 2: Examples of the following exercise

The first two examples in the following example are the same as the previous ones. They are intended to help you compare them with the upcoming third example.

1-15 Example 11: Combining borders into a single border

The border-spacing property value is set to 10 pixels:

R1C1	R1C2
R2C1	R2C2

Setting the border-spacing property to 0 pixels removes the space between the table cells' borders:

R1C1	R1C2
R2C1	R2C2

Setting the border-collapse property to collapse merges the borders into a single border:

R1C1	R1C2
R2C1	R2C2

1-15 A 14

create this table:

Plum	Orange
CornflowerBlue	DarkTurquoise

then modify the HTML code to display this table:

Plum	Orange
CornflowerBlue	DarkTurquoise

1-15 A 15 Rereading the yellow sections

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

1-15 A 16 StarfruitJuice15.html

save StarfruitJuice14a.html as StarfruitJuice15.html
modify StarfruitJuice15.html to make it look like this.

1-15 Submit 1: Study motivation

Click here.

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-15 A 2

</table>

</table>

</body>
</html>

1-15 A 4

</body>
</html>

1-15 B 1

<table style="width:60%;margin-left:20%;border:5px;border-style:solid;border-color:blue;">
               <tr style="height:50px;">
                      <td style="border-style:solid;border-color:red;width:80%;"> 80%</td>
                      <td style=" border-style:solid;border-color:red;"> </td>
              </tr>
</table>

1-15 A 6

<html>
<table width="50%" style="border-style: solid; border-color: black; text-align: justify;">
            <tr>
                    <td>
Thinking about your website not only makes you more creative but also
helps you understand how it works. Figuring out how the code you imagine
fits with the website you picture makes your creative skills even better.
Changing the design in your mind all the time is like practicing and getting
better at being creative.
                    </td>
            </tr>
</table>
</html>

1-15 A 8

<html>
<body>

1-15 A 9

<html>
<body>

</body>
</html>

1-15 A 10

<html>
<body>

</body>
</html>

1-15 A 12

<html>
<body>

1-15 B 2

<html>
<body>

<table style="width:70%;margin-left:20%;border:5px;border-style:solid;border-color:blue; ">
             <tr>
                     <td style="vertical-align:bottom;height:70px;border-width:4px; border-style:solid;border-color:red;width:70%;">R1C1</td>
                     <td style="text-align:right;vertical-align:top;border-width:4px; border-style:solid;border-color:red;">R1C2</td>
             </tr>

1-15 B 3

<table style="width:70%;margin-left:20%;border:5px;border-style:solid;border-color:blue;">
              <tr>
                      <td style="vertical-align:bottom;border:0px; border-style:solid;border-color:red;height:70px;width:70%;">R1C1</td>
                      <td style="text-align:center;vertical-align:top;border:0px; border-style:solid;border-color:red;">R1C2</td>
              </tr>

              <tr>
                      <td style="text-align:center;height:50px;vertical-align:top;border:0px; border-style:solid;border-color:red;">R2C1</td>
                      <td style="text-align:left;vertical-align:bottom;border:0px; border-style:solid;border-color:red;">R2C2</td>
              </tr>
</table>

1-15 A 13

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

<!- - Three row table. Set style attribute for position style and table size style. - ->
<table style="margin-left:12.5%;width:75%;">

             <tr>
<!- - Heading spanning 2 columns. Set colspan attribute and style attribute for text style and table style. - ->
                     <td colspan="2" style="text-align:center;background-color:coral;height:50px;">
                             <h1>Starfruit Juice Recipe</h1>
                    </td>
             </tr>

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

<!- - Second row and first column of the table. Set style attribute for background color style. - ->
<td style="width:30%;background-color:cornsilk;">

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

<!- - Second row and second column of the table. Set style attribute for alignment, background color and size styles. - ->
                      <td style="width:70%;text-align:center;background-color:khaki;width:70%;">

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

<!- - Third row and first column of the table. Set style attribute for text and table styles. - ->
                     <td style="vertical-align:top;background-color:bisque;width:30%;">

<!- - Second title. 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><font size="+1" face="Arial">3 mint leaves</font></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>

<!- - Third row and second column of the table. Set style attribute for background color style and width style. - ->
                     <td style="background-color:gold;width:70%;">

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

1-15 A 14

<html>
<body>

<table style="width:70%;margin-left:20%;border:5px;border-style:solid;border-color:blue; border-spacing:0px; ">
             <tr>
                      <td style="font-weight:bold;vertical-align:bottom;border-color:red;background-color:Plum;height:70px;width:70%;">Plum</td>
                      <td style="font-weight:bold;text-align:right;vertical-align:top;background-color:Orange;border-color:red;">Orange</td>
             </tr>

             <tr>
                      <td style="font-weight:bold;text-align:center;height:50px;vertical-align:top;background-color:CornflowerBlue;border-color:red;">CornflowerBlue</td>
                      <td style="font-weight:bold;text-align:left;vertical-align:bottom;background-color:DarkTurquoise;border-color:red;">DarkTurquoise</td>
             </tr>
</table>

</body>
</html>

1-15 A 16

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

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

<!- - Three row table. Set style attribute for position style and table size style. - ->
<table style="margin-left:12.5%;width:75%;border-spacing:0px;">

             <tr>
<!- - Heading spanning 2 columns. Set colspan attribute and style attribute for text style and table style. - ->
                     <td colspan="2" style="text-align:center;background-color:coral;height:50px;">
                             <h1>Starfruit Juice Recipe</h1>
                    </td>
             </tr>

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

<!- - Second row and second column of the table. Set style attribute for alignment, background color and size styles. - ->
                      <td style="width:70%;text-align:center;background-color:khaki;width:70%;">

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

<!- - Third row and first column of the table. Set style attribute for text and table styles. - ->
                     <td style="vertical-align:top;background-color:bisque;width:30%;">

<!- - Second title. 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><font size="+1" face="Arial">3 mint leaves</font></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>

<!- - Third row and second column of the table. Set style attribute for background color style and width style. - ->
                     <td style="background-color:gold;width:70%;">

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

</html>

This page was created by Hanspeter Amend

Previous page Table of contents