Bootstrap 3 col-xs not working as expected - html

I'm using Bootstrap 3 for a fairly simple table, I need to display 4 columns side by side even on phones, something like this:
<div class="container">
<div class="row" >
<div class="col-xs-5" >
<p style="margin-top: 25%;">A Day in the life of Dror</p>
</div>
<div class="col-xs-1">6:30 am<br />7:30 am<br />8:00 am<br />13:00 am<br />16:00 am<br />17:00 am<br />18:00 am<br />20:00 am<br />22:00 am<br />23:00 am</div>
<div class="col-xs-1">sample img</div>
<div class="col-xs-5 ">WAKE UP <br />MEETING / BREAKFAST <br />FIRST LESSON / TFILA <br />LUNCH BREAK <br />END OF SCHOOL <br />HOMEWORK TIME<br />DINNER <br />EXTRA CURRICULUM ACTIVITIES<br />ALL RETURN TO BUILDING <br />LIGHT'S OUT</div>
</div>
</div>
but on phones it still displays stacked.


Well the code works fine, you must be facing an issue due the padding on smaller phones, maybe you can set the padding to 0px or to any other value less than the default which is 15px for both the left and right side, we need to do this for all the columns under the row.
.remove-padding > div{
padding:0px;
}
So I add the class remove-padding to the remove the padding for all the children of the first level of row (i.e the columns under the row). Please let me know if this fixes your issue.
JSFiddle Demo


.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px";>
<div class="container">
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>6:30 am</td>
<td>sample img</td>
<td>WAKE UP</td>
</tr>
<tr>
<td> </td>
<td>7:30 am</td>
<td> </td>
<td>MEETING / BREAKFAST</td>
</tr>
<tr>
<td> </td>
<td>8:00 am</td>
<td> </td>
<td>FIRST LESSON / TFILA </td>
</tr>
<tr>
<td> </td>
<td>13:00 am</td>
<td> </td>
<td>LUNCH BREAK</td>
</tr>
<tr>
<td> A Day in the life of Dror </td>
<td>16:00 am</td>
<td> </td>
<td>END OF SCHOOL</td>
</tr>
<tr>
<td> </td>
<td>17:00 am</td>
<td> </td>
<td>HOMEWORK TIME</td>
</tr>
<tr>
<td> </td>
<td>18:00 am</td>
<td> </td>
<td>DINNER</td>
</tr>
<tr>
<td> </td>
<td>20:00 am</td>
<td> </td>
<td>EXTRA CURRICULUM ACTIVITIES</td>
</tr>
<tr>
<td> </td>
<td>23:00 am</td>
<td> </td>
<td>ALL RETURN TO BUILDING</td>
</tr>
<tr>
<td> </td>
<td>24:00 am</td>
<td> </td>
<td>LIGHT'S OUT</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Related

how can i merge the two rows 'Ninja ' in one row with the same name 'Ninja'?

how can i merge the two rows 'Ninja ' in one row with the same name 'Ninja' ?
i used the rowspan in the first Ninja and it doesn't work why ? i want to make the table looks good
here is my code :
<body>
<Table style="width:100%" border="2" > <caption>Member's Data</caption>
<thead>
<tr>
<th>Groupe </th>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Character</th>
<th>profile</th>
</tr>
</thead>
<tbody>
<tr>
<td> Ninja </td>
<td>
<img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td> Osama <br> Mohamed</td>
<td>
o1#nn.sa <br> <hr> o2#nn.sa
</td>
<td> © </td>
<td> profile</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Ninja</td>
<td>
<img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td>Shady <br>Nabil </td>
<td>s#nn.sa </td>
<td> ™ </td>
<td> profile </td>
</tr>
</tbody>
<tbody>
<tr>
<td>Monsters</td>
<td>
<img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
</td>
<td>Mohamed <br> Ibrahim</td>
<td> m#nn.sa </td>
<td> ® </td>
<td> profile</td>
</tr>
</tbody>
thank you for your answers

You can use the rowspan attribute to make cells merge with other cells. to make it work, you have to remove the <thbody>. the code will be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<Table style="width:100%" border="2" > <caption>Member's Data</caption>
<thead>
<tr>
<th>Groupe </th>
<th>Avatar</th>
<th>Name</th>
<th>Email</th>
<th>Character</th>
<th>profile</th>
</tr>
</thead>
<tr>
<td rowspan="2"> Ninja </td>
<td>
<img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td> Osama <br> Mohamed</td>
<td>
o1#nn.sa <br> <hr> o2#nn.sa
</td>
<td> © </td>
<td> profile</td>
</tr>
<tr>
<td>
<img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
</td>
<td>Shady <br>Nabil </td>
<td>s#nn.sa </td>
<td> ™ </td>
<td> profile </td>
</tr>
<tr>
<td>Monsters</td>
<td>
<img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
</td>
<td>Mohamed <br> Ibrahim</td>
<td> m#nn.sa </td>
<td> ® </td>
<td> profile</td>
</tr>
</body>
</html>
and for the output like this :

How to keep Elements to separate pages - for printing - without overflow to additional page

I am trying to print some tables and an image on two separate pages.
However when I do this I always get additional page that spills over into a 3rd page when I am trying to print.
How do I get rid of the additional page space or overflow that appears on a 3rd page when printing?
I have added page break after and before in the past in various places to remedy this with no success.
The tables will move in size due to data that is shoved in them - but never more than a page. So the image on the secopnd page needs to allow for that as well as keeping to the second page. I am struggling with this. I've tried using absolute position to get it to stay fixed, but it still moves when the table moves, pushing into a third page at times.
Any suggestions help. Thanks
HTML:
<body>
<table class="tableWrapper" cellpadding="3">
<tr class="no-counter">
<td>
<table class="table headingTable">
<tr class="no-counter">
<td>Total<br />Persons<br />Onboard</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4"> <#Tour_Resource type="lookup" value="resource_resource" display="resource_name"></th>
</tr>
<tr class="no-counter">
<td>Date</td>
<td><#Tour_Date_In format="ddd d mmm yyyy"></td>
<td>Wind Direction</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Dept Time</td>
<td><#Tour_Date_In format="h:nn am/pm"></td>
<td>Wind Strength</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Ret Time</td>
<td></td>
<td>Swell/Waves</td>
<td></td>
</tr>
<tr class="no-counter">
<td>Dive Site</td>
<td>
<#Tour_TourTemp type="lookup" value="tourtemp_tourtemp" display="tourtemp_name">
</td>
<td>Tide</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Dive Plan / Skipper</th>
</tr>
<tr class="no-counter">
<td>Planned Total Dive Time</td>
<td style="text-align:right;">min</td>
</tr>
<tr class="no-counter">
<td>Time in (first dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Time out (last dive)</td>
<td style="text-align: center;">:</td>
</tr>
<tr class="no-counter">
<td>Master/Skipper</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Boat Crew</th>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 1</td>
<td> </td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 2</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 3</td>
<td></td>
</tr>
<tr class="no-counter">
<td nowrap>G.P Crew 4</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="4">Passenger Count</th>
</tr>
<tr class="no-counter">
<td colspan="2">Before Departure</td>
<td colspan="2">Before Return</td>
</tr>
<tr class="no-counter">
<td>Divers</td>
<td> </td>
<td>Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Non Divers</td>
<td> </td>
<td>Non Divers</td>
<td> </td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="table headingTable">
<tr class="no-counter">
<th colspan="2">Checks</th>
</tr>
<tr class="no-counter">
<td>Air On & Checked</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Connected?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>BCDs Inflate?</td>
<td style="text-align: center;"><input type="checkbox"></td>
</tr>
<tr class="no-counter">
<td>Signed</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table class="table service-cart">
<tr class="no-counter">
<th>#</th>
<th style="margin:0; padding: 0;">Buddy<br/>Group</th>
<th>Name</th>
<th>Booked</th>
<th>Loc</th>
<th>Last Dive</th>
<th>Air Full</th>
<th>Plan<br/>Depth</th>
<th>Plan<br/>Bottom<br/>Time</th>
<th>Safety<br/>Stop<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Total<br/>Time</th>
<th style="padding-left: 6px; padding-right: 6px;">Gas<br/>Mix</th>
<th>M.O.D.</th>
<th style="padding-left: 5px; padding-right: 5px;">In<br/>Time</th>
<th style="padding-left: 5px; padding-right: 5px;">Out<br/>Time</th>
<th>Actual<br/>Depth</th>
<th>Actual<br/>Run<br/>Time</th>
<th>Stops<br/>Cmpld</th>
<th style="padding-left: 40px; padding-right: 40px; text-align: left;">Sign for<br/>- Dive Parameters Done<br />- Returned Onboard</th>
</tr>
<#Reference filter="reference_status = 'A'" order="Guest_surname">
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
<tr style="background-color: #ffffff;">
<td> </td>
<td> </td>
<td class="text-left"><input type="checkbox"></td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align:right;">%</td>
<td style="text-align:right;">M</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="text-center"><input type="checkbox"></td>
<td> </td>
</tr>
</table>
<hr class="break">
<div class="second">
<img src="/vessellog.png" class="dlog">
</div>
</body>
</html>
CSS:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styletable.css">
<style>
table tbody tr:not(.no-counter) {
counter-increment: rowNumber;
}
table tbody tr:not(.no-counter) td:nth-child(1)::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
.headingTable {
height: 150px;
font-size: 12px;
width: 100%;
}
.tableWrapper {
width: 100%;
border-collapse: collapse;
}
.second {
transform: rotate(270deg);
margin-left: 180px;
margin-top: -60px;
width: 720px;
height: 1080px;
position: absolute;
}
.dlog {
max-width: 100%;
max-height: 100%;
}
.break {
page-break-after: always;
}
</style>
</head>

To solve my issue what I did was add: <div style="page-break-before:always;"> </div> after the last <table> on first page. This created the page break I needed to print on separate pages. As in:
</table> /* End of First Page */
<div style="page-break-before: always;"> </div>
<div class="vlogimage"> /*Second Page*/
<img class="logologext" alt='<#Business_name>' src= "<#servername>/<#Register_Directory>/<#Splash_Logo>?v=<#now format='yy-mm-dd-hh-nn'>">
<p class="vlogtext"><#Business_name> Daily Vessel Log</p>
<img src="/vessellog.png" class="dlog" >
</div>
I tried applying page-break-before: always; to the first <div> on my second page and this did not work how I was hoping.
Hope this helps someone out there!

Basic Help For Html Tables

table > thead > tr >th>.empty-cell{
background-color: transparent ;
border : none;
}
<html>
<head><title>Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<thead>
<tr>
<th class="empty-cell"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</thead>
<tbody>
</tr>
</table>
</body>
I want to have a empty cell in header table in css like this pic:
Can anyone help me? I'm a very beginner.

This is an exemple without Bootstrap, i used font-awesome for icon, look the complete code here https://codepen.io/alex-grz/pen/KKNZvOZ.
table {
font-family: sans-serif;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
text-align:center;
padding:1rem 3rem;
font-size: .8rem;
}
.table > thead > tr > th:first-child {
background-color:unset;
}
.table > thead > tr > th {
border-radius: 6px 6px 0 0;
}
.table > tbody > tr > th {
border-radius: 6px 0 0px 6px;
}
.table > thead > tr > th, .table > tbody > tr > th {
background-color:#9BD727;
color:white;
}
.table > tbody > tr > td {
background-color:#DEF2CC;
color:black;
}
.table>tfoot>tr>td {
color: #9BD727;
font-size:1rem;
}
.fa-check {
color:#9BD727;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Smart Starter</th>
<th scope="col">Smart Medium</th>
<th scope="col">Smart Buisiness</th>
<th scope="col">Smart Deluxe</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandiwdth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
</tr>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>

You may have not noticed the empty cell in the first line because of no content in any other cell in the first column below. I have moved a misplaced </tr> and made a bit of order in the style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table{
border: 0;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
text-align:center;
padding: 5px;
}
th,td.greenc{
background-color: #0c0;
}
th.empty{
border: 0;
background-color: transparent;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="empty"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</tr>
</thead>
<tbody>
<tr>
<td class="greenc"> Storage Space </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> B </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> C </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> D </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> E </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>
</body>
</html>
Check the updated snippet:
table{
border: 0;
border-collapse: collapse;
}
th,td{
border: 1px solid #000;
text-align:center;
padding: 5px;
}
th,td.greenc{
background-color: #0c0;
}
th.empty{
border: 0;
background-color: transparent;
}
<table>
<thead>
<tr>
<th class="empty"></th>
<th> Smart Starter </th>
<th> Smart Medium </th>
<th> Smart Business </th>
<th> Smart Deluxe </th>
</tr>
</thead>
<tbody>
<tr>
<td class="greenc"> Storage Space </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> B </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> C </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> D </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
<td> Content </td>
</tr>
<tr>
<td class="greenc"> E </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>
Then you can further customize the style as you prefer. We couldn't see your style.css file before answering: always remember that CSS is cascade style sheet.

i will give you example using boostrap css
table > thead > tr > th.empty-cell{
background-color: transparent ;
border : none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div style="padding: 20px;">
<table class="table table-dark table-striped">
<thead>
<tr>
<th class="empty-cell"></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
i add class empty-cell to <th> like image example , and add to style background-color: transparent ; to make the cell like nothing, if your css table have a border you can add border: none to style to, its depend on you style table

background color of table cells using css and html

I've coded a table I want it to be like this : even and odd rows have different colors and first row and column have the same color ;
I used colgroup for coloring first column but it doesn't work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Maybe this is what you wanted.
CSS
table tr td:first-of-type {background-color: purple !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
table tr td:first-of-type {background-color: purple !important;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

You can use the even and odd rules of the nth-child pseudoclass
tr:nth-child(even) {background: #FCF}
tr:nth-child(odd) {background: #F9F}
Followed by:
td:first-of-type,
tr:first-of-type {background: purple}

You can use CSS nth-child (IE9+), which also removes the need for even and odd classes in the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
td {background-color:#f9f;}
tr:nth-child(even) > td {background-color:#fcf;}
tr > td:first-child {background-color:purple;}
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Padding Property not applying?

I wanted it to have a table which was half red and half blue, with some padding between the borders and the text. I just can't figure out why the padding property isnt apply in this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Practice Exercise </title
<style>
.red{background-color:red}
.blue{background-color:blue}
table{border-collapse:collapse;padding:40px;}
</style>
</head>
<body>
<table border ="1">
<tr>
<th class="red"> State </th>
<th class="blue"> Capital </th>
</tr>
<td class="red"> Utah </td>
<td class="blue"> Salt Lake City </td>
</tr>
<td class="red"> Texas </td>
<td class="blue"> Austin </td>
</tr>
<td class="red"> Tennesse </td>
<td class="blue> Nashville </td
</tr>
</table>
</body>
</html>

You had a lot of typos in you markup:
i will point them all up.
<table border="1">
<tr>
<th class="red">State</th>
<th class="blue">Capital</th>
</tr>
<tr> <!-- missing -->
<td class="red">Utah</td>
<td class="blue">Salt Lake City</td>
</tr>
<tr> <!-- missing -->
<td class="red">Texas</td>
<td class="blue">Austin</td>
</tr>
<tr> <!-- missing -->
<td class="red">Tennesse</td>
<td class="blue">Nashville</td> <!-- missing one " after blue, and one > after </td -->
</tr>
</table>
also: you applied the padding on the table, you should have applied it on the td, th like this:
CSS
td, th
{
padding: 5px;
}
Working Fiddle