My Community

Tutorial 4 Changing Font Colors And Creating Table Charts

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 4 Changing Font Colors And Creating Table Charts
« on: September 15, 2014, 12:30:35 PM »
There are two things we will go over today in this tutorial.  Changing Font colors, creating table charts, and how to add color in the background of your table chart.

<FONT COLOR="red">DRAFT UTOPIA</FONT>

Entering this makes the Draft Utopia font red.  Type another color in between the quotes of FONT COLOR to change the color of your webpage to any color you wish.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Changing Font Colors And Creating Table Charts
« Reply #1 on: September 15, 2014, 12:36:58 PM »
I made two basic table charts.  One without color and one with color.  I thought the lesson plan the book showed was pretty cool, and I took that into account when making this lesson plan.

There are also colspan="2" and rowspan="2" tags to keep in mind.

colspan gives you an area of a table that can be lined up with another area of the table horizontally or vertically.  If you have two lines of code or more the first thing you code will always be colspan as long as you use colspan and rowspan for coding.

If there is nothing left in one row and you have already used the first colspan you may want to go with a rowspan.  I'll talk about this later  and show you an example with my final table chart.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Changing Font Colors And Creating Table Charts
« Reply #2 on: September 15, 2014, 12:38:18 PM »
This document called flag.html shows you how colspans and rowspans work.  Just enter in this code and save it as flag.html

<html>
<head>
<title>Service Data</title>
<style type="text/css">
   td, th { border: 1px solid #cc9900; }
   table {background-color: #ffffcc; border: 4px solid #cc9900; }
</style>
</head>
<body>
<table summary="drive belt deflection"
cellspacing="0"
cellpadding="5">
<caption style="text-align: left">Drive Belt Deflection</caption>
<tr>
 <th rowspan="2" colspan="2"></th>
 <th colspan="2">Used Belt Deflection</th>
 <th rowspan="2">Set
deflection
of new belt</th>
</tr>
<tr>
 <th>Limit</th>
 <th>Adjust
Deflection</th>
</tr>
<tr style="text-align: center">
 <th rowspan="2" style="text-align: left">Alternator</th>
 <td style="text-align: left">Models without AC</td>
 <td>10mm</td>
 <td>5-7mm</td>
<td rowspan="2">5-7mm</td>
</tr>
<tr style="text-align: center">
 <td style="text-align:left">Models with AC</td>
 <td>12mm</td>
 <td>6-8mm</td>
</tr>
<tr style="text-align: center">
 <th colspan="2" style="text-align: left">Power Steering Oil Pump</th>
 <td>12.5mm</td>
 <td>7.9mm</td>
 <td>6-8mm<td>
</tr>
</table>
</body>
</html>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Changing Font Colors And Creating Table Charts
« Reply #3 on: September 15, 2014, 12:40:30 PM »
<html>
<head>
<title>Table Chart Without Colors</title>
</head>
<body>
<table border="1" summary="color combinations">
<tr>
<th>
</th>
<th>Red</th>
<th>Yellow</th>
<th>Blue</th>
</tr>
<tr>
<th>Red</th>
<td>Red</td>
<td>Orange</td>
<td>Purple</td>
</tr>
<tr>
<th>Yellow</th>
<td>Orange</td>
<td>Yellow</td>
<td>Green</td>
</tr>
<tr>
<th>Blue</th>
<td>Purple</td>
<td>Green</td>
<td>Blue</td>
</tr>
</table>
</body>
</html>

Save this as tables-without-colors.html

If you did this correctly you should see a white background with all the colors listed.  The next table will feature background-colors matching each color we coded.  for example instead of saying <th>Yellow</th> we will say <th bgcolor="yellow"> So that everything aligns together.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 4 Changing Font Colors And Creating Table Charts
« Reply #4 on: September 15, 2014, 12:55:56 PM »
<html>
<head>
<title>Table Chart With Colors</title>
</head>
<body>
<table border="1" summary="color combinations">
<tr>
<th>
</th>
<th bgcolor="red">Red</th>
<th bgcolor="yellow">Yellow</th>
<th bgcolor="blue">Blue</th>
</tr>
<tr>
<th bgcolor="red">Red</th>
<td bgcolor="red">Red</td>
<td bgcolor="orange">Orange</td>
<td bgcolor="purple">Purple</td>
</tr>
<tr>
<th bgcolor="yellow">Yellow</th>
<td bgcolor="orange">Orange</td>
<td bgcolor="yellow">Yellow</td>
<td bgcolor="green">Green</td>
</tr>
<tr>
<th bgcolor="blue">Blue</th>
<td bgcolor="purple">Purple</td>
<td bgcolor="green">Green</td>
<td bgcolor="blue">Blue</td>
</tr>
</table>
</body>
</html>

Here is an example of table charts with colors.  Save this as table-charts-with-colors.html  If you did this correctly, you should see Red, Yellow, and Blue headers on the top and vertically with colors bolded.  You should also see what colors become what if you mix them together.  Red and Red is Red.  Red and Yellow is Orange.  You should see red, orange, and purple colors in the background in addition to the words red, orange, and purple under the first row.

One more thing.  When I code websites I use this frequently for coding tables.
<table width="98%" border="2">
<tr>
<td width="25%"><div align="center" class="article"><strong>Enter Text Here</strong></div></td>
</tr>
</table>

You must always have a border after writing the words table.  Most use <table border="1"> when first making a table.

If you want to create to create vertical tables just use one <td></td> bracket and then keep putting that inside the <tr></tr> bracket like this <tr><td></td></tr>  then make a new bracket <tr><td></td></tr>  Keep doing that and you will have a vertical table up in no time.

Did you get all that?  Great.  Just make sure to remember that and apply it when necessary.

Lesson 5 Involves adding a background image.  It is a real quick lesson.  I'm thinking about resuming lessons 4-6 in HTML, CSS, and Javascript for the next three weeks and waiting until the offseason to post lessons 7-10 now.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.