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
Related
Need help with this:
So far with my current knowledge, I was able to design till here but it looks wrong and something is missing.
My code -
<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<table border=2cellspacing=4cellpadding=4 border color dark="red" border color light="blue"
align="center">
<caption>List of Books</caption>
<tr>
<th row span=2align="center">ItemNo</th>
<th row span=2align="center">ItemName</th>
<th align="center"colspan=2>Price</th>
</tr>
<tr>
<th align="center">Rs.</th>
<th align="center">Paise</th>
</tr>
In HTML, you need to enclose the values for the attributes in doublequotes, no matter what it is (integer, string, functions, etc.) i.e.
<tr rowspan="3"></tr>
<span class="short"></span>
<button onclick="jump()"></button>
In the table, there's no such attribute called row span and col span. It's rowspan and colspan.
If you want to set the padding that's same across all cells in the table, you can simply add it to <style> and use CSS for it. If all cells have different styles, you can also apply the attribute style for each th and td.
<style>
td, th {
padding: 10px;
}
</style>
<table border="2">
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Price</th>
</tr>
<tr>
<th>Rs.</th>
<th>Paise</th>
</tr>
</table>
Here is your code:
<html>
<head>
</head>
<body>
<table align="center" border="1" cellspacing="0">
<caption>List of Books</caption>
<tr>
<th style="padding: 10px" rowspan="2">ItemNo</th>
<th style="padding: 10px" rowspan="2">ItemName</th>
<th style="padding: 10px" colspan="2">Price</th>
</tr>
<tr>
<td style="padding: 10px">Rs.</td>
<td style="padding: 10px">Paise</td>
</tr>
<tr>
<td style="padding: 10px">1</td>
<td style="padding: 10px">Programming in Python</td>
<td style="padding: 10px">500</td>
<td style="padding: 10px">50</td>
</tr>
<tr>
<td style="padding: 10px">2</td>
<td style="padding: 10px">Programming in Java 30</td>
<td style="padding: 10px">345</td>
<td style="padding: 10px">00</td>
</tr>
</table>
</body>
I am generating some html-formatted emails and I want the email body to be inside a thin, grey rectangle, like this:
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<table style="border:none; width:840pt; border-collapse:collapse;">
<thead>
<tr>
<td colspan="3" style="background:rgb(231, 230, 230);height:10pt"></td>
</tr>
<tr>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
<td style="width:820pt;">
<table>
<tbody>
<tr>
<th style="width:800pt; text-align: left;">
<p class="p1">Title goes here...</p>
<p class="p2">Subtitle goes here...</p>
</th>
<th>
<p><img class="img1" src="C:\...." alt="image goes here" style="margin: 0px; align: right"></p>
</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 10pt;background: rgb(231, 230, 230);"></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
<td>
<p>email body goes here...<br><br></p>
</td>
<td style="width:10pt; background:rgb(231, 230, 230);"></td>
</tr>
<tr>
<td colspan="3" style="background:rgb(231, 230, 230);height:10pt;"></td>
</tr>
</tbody>
</table>
Problem is, the rectangle causes indentation visible in the preview pane in Outlook:
Any ideas how this can be prevented so that it looks like in the previous message?
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>
Here is my current code for my table. I am trying to make the table header "Famous Monsters by Birth Year" the color red and cannot figure out for the life of me how to do it.
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;"><em>Famous Monster</em></th>
<th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
</body>
</html>
If you do not want to use a separate CSS file and simply want to make the header red within your html you can do the following:
<th colspan="2"><font color="red">Famous by Birth Year</font></th>
But as the collor attribute of the font tag is not supported by HTML5 I would recommend using in-line CSS:
<th colspan="2" style="color:red">Famous by Birth Year</th>
I would like to options for making tables in my css. One with a border of 5px solid black and one with 0px. Currently in CSS i have
#contentcolumn table {
border: 5px solid black;
width: 100%;/*around 700 max for images*/
border-collapse: collapse;
}
That gives me the black 5px border, but now i need to also have one that does 0px border.
I have tried setting the 0px table in html but the css seems to over ride it. here is the html for the two tables.
<table>
<tr>
<td align="center"><IMG SRC="images/newsimage/minecraft1.jpg" ALT="mindcraft">
</td>
</tr>
<tr>
<td>Is minecraft still considered an indie game? blah blah blha lbhalbhal
</td>
</tr>
</table>
<!-- Reviews start -->
<!-- Review #1 -->
<table Border='0'>
<tr>
<th rowspan="4" width="30%">Some Image</th>
<td>Link</td>
</tr>
<tr>
<td>By who</td>
</tr>
<tr>
<td>Some info</td>
</tr>
<tr>
<td>comments</td>
</tr>
</table>
both tables are inside div tags <div id="contentcolumn"> if that matters?
Try to give border:none into style attribute. It will overwrite your css properties in css file. <table style="border:none;">
CSS:
.no-border {
border:none;
}
HTML:
<table class="no-border"></table>
You can done this using css itself. By using below css style
#contentcolumn #review_table{border:0px}
and add a id in your table like below
<div id="contentcolumn">
<table>
<tr>
<td align="center"><IMG SRC="images/newsimage/minecraft1.jpg" ALT="mindcraft">
</td>
</tr>
<tr>
<td>Is minecraft still considered an indie game? blah blah blha lbhalbhal
</td>
</tr>
</table>
<!-- Reviews start -->
<!-- Review #1 -->
<table Border='0' id="review_table"> //CHANGE: ADD THE ID TO THIS TABLE
<tr>
<th rowspan="4" width="30%">Some Image</th>
<td>Link</td>
</tr>
<tr>
<td>By who</td>
</tr>
<tr>
<td>Some info</td>
</tr>
<tr>
<td>comments</td>
</tr>
</table>
</div>
JSFILLDE:
http://jsfiddle.net/54EyB/