Table Headings and Heights of Table Rows

1-14 A 1 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;">
              <tr>
                     <td colspan=3 style="border-width:4px; border-style:solid;border-color:red;">R1.</td>
             </tr>

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

</body>
</html>

Open this file in a browser and explain this attribute: colspan=3

1-14 Explanation 1: The colspan attribute of the table data tag pair

To extend content over several columns, set the colspan attribute of the table data tag pair to the number of columns you want it to span:

<td colspan="property value"></td>

1-14 Example 1: The colspan attribute of the table data tag pair

In this table, the first row extends over the first column only:

</body>
</html>

R1C1
R2C1	R2C2

To extend the first row over two columns, set the colspan attribute of the table data tag pair to 2:

</body>
</html>

R1
R2C1	R2C2

1-14 A 2 The colspan attribute of the table data tag pair

In the Exercises01 folder, create an HTML file that displays this table:

R1
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3
R4C1	R4C2	R4C3

1-14 A 3 The text-align property of the table data tag

In the Exercises01 folder, create an HTML file that displays this table:

R1
R2C1	R2C2

1-14 A 4 Text centered

In the Exercises01 folder, create an HTML file that displays this table:

R1
R2C1	R2C2
R3C1	R3C2
R4C1	R4C2

1-14 Explanation 2: The text-align property of the table data tag

The text-align property of the table data tag pair can be set to left, center and right. This style can be applied to the table data tag, together with the colspan attribute. If it is not set, then the alignment will default to left.

1-14 A 5 Discover

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

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

</body>
</html>

Open this file in a browser and explain this style: height:100px;

1-14 Explanation 3: The height of a table row

The height style can be used to set the height of a table row: <tr style="height:value in px;" >

1-14 A 6

In the Exercises01 folder, create an HTML file that displays the table below. The height of its middle row is set to 50px.

R1C1	R1C2
R2C1	R2C2
R3C1	R3C2

1-14 A 7 Rereading the yellow sections

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

1-14 A 8 StarfruitJuice14.html

save StarfruitJuice13.html as StarfruitJuice14.html
modify StarfruitJuice14.html to make it look like this.

Use coral as the background color for the table row with the Starfruit Juice Recipe title.

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-14 A 2

<table style="border-width:5px;border-style:solid;border-color:blue;">
              <tr>
                     <td colspan=3 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>

</body>
</html>

1-14 A 3

<table style="border-width:5px;border-style:solid;border-color:blue;">
              <tr>
                     <td colspan=2 style="border-width:4px; border-style:solid;border-color:red;text-align:center;">R1.</td>
             </tr>

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

1-14 A 6

</body>
</html>

1-14 A 8

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

             <tr>
<!- - Heading spanning 2 columns. Set colspan attribute and style attribute for text style and table style. - ->
                     <td colspan="2" style="border-width:4px; border-style:solid;border-color:red;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="border-width:4px; border-style:solid;border-color:red;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="border-width:4px; border-style:solid;border-color:red;width:70%;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>

<!- - Third 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><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="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