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>
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 trying to build a very simple array, but somehow It is not working How I think it should. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">sigle row of 8 cols</th>
</tr>
<tr >
<td colspan="2">2 cols </td>
<td rowspan="3" colspan="6" > 6 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
</table>
</body>
</html>
Please help me to debug.
I want the months to occupy only 2 column and the saving to occupy 6 columns (the rest), but, this is not working as expected. I know the answer is trivial, but I cannot find it. Can you please tell me what is wrong?
The table will have 8 columns, but you have effectively reduced it to 2. The table rendering algorithm will make things as efficient as it can.
By adding an additional row you can see what is happening
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">Monthly Savings</th>
</tr>
<tr >
<td colspan="2">January</td>
<td rowspan="3" colspan="6" >$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
What you are better off doing is assigning width to the columns
table, th, td {
border: 1px solid black;
}
<table width=100%>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr >
<td style="width:33%">January</td>
<td rowspan="3" style="width:66%" >$30000</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
because the you add heading in single <th> so make id different
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
so it will display 2 for month and 6 for saving
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td rowspan="3" colspan="6">$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
</table>
</body>
</html>
My HTML is:
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; ">
No Border here, just white background
</th>
<th style="width:60%; background-color:gray" colspan="3">
Superheading</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
How do I remove the border in the top left cell ie the cell that contains "No Border here, just white background".
Thanks.
You could do it like this - DEMO
HTML:
<body>
<style>
table, table th, table td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; background-color:white;" class="border-less"> </th>
<th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
</body>
CSS:
.border-less {
border-top: 1px solid white;
border-left: 1px solid white;
}
try to add :
style="border: none";
on th tag or the tr tag containing the headers.Depending on what you need..
This fiddle uses CSS and a '.borderless' class.
However, if you wanted to stick to inline styling, you could do this:
<th style="width:40%; border:none;">
I'm sending email in Oracle 11g with apex_mail.send function. I have below html structure. I have added style for table in this html. but when i open received email, style is not applied to the table. only text is visible.
How can i solve this ?
<html>
<head>
<style>table{border-collapse:collapse;}table,td,th{border:1px solid grey;}td,th{padding:5px;}</style>
</head>
<body>
<table width="100%">
<tr>
<th scope="col">Company</th>
<th scope="col">Amount</th>
<th scope="col">Reference</th>
<th scope="col">Note</th>
</tr>
<tr>
<td>HNB</td>
<td>226</td>
<td>..952</td>
<td>Insurance payment.</td>
</tr>
<tr>
<td>AC</td>
<td>2150</td>
<td>..255</td>
<td>A/C service.</td>
</tr>
</table>
</body>
</html>
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>