I have this simple code.
<div class="rating" >
<table>
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner......................... </td>
<td> #runner-up#.....................................</td>
</tr>
</table>
</div>
table.rating, th,tr,td
{
width:100%;
border-collapse:collapse;
border:1px solid black; height:50px;
border:1px solid black;
}
Using the css I want to make better. How can I have it that it looks more like a table and not be separated like that, and have the be in the middle?
I have created a http://fiddle.jshell.net/9axbx/ , all I really want to do make the table look better.
The following code sets it up more like a table:
<div class="rating" >
<table border="1">
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner</td>
<td> #runner-up#</td>
</tr>
</table>
</div>
<style type="text/css">
table.rating, th,tr,td
{
width: 30%;
border-collapse:collapse;
border:1px solid black;
height:50px;
border:1px solid black;
text-align: center;
}
</style>
Here's what it looks like:
I'm not quite sure what you're looking for, but that should be a good start. You really should have the <style></style> tags inside the <head></head> of your html document, but the above still works, for demonstration purposes.
EDIT: Just a note on the changes I made--
I first removed the periods after the text in the last couple of cells. Not quite sure what you put them there for. Second, I added text-align:center to your CSS. If you don't want the text centered, you can change it to, say, text-align:left to align it to the left. Third, You do not need a border, and if you don't want one just remove the border options from the CSS. Finally, I changed the width of your cells to 30%, so they all should be the same width. This makes things much neater and cleaner. 100% makes a cell the full width of the table, which I assume you don't want. If you want a cell to take up more than one column you should use the colspan attribute.
Related
There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:
/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }
I would think there's a way to do something like:
table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }
Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.
Suggestions?
Edit: Adding snipped/edited page code
table#table_organization tr.unsure,
tr.dept,
tr.org {
background-color: honeydew;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Unfortunately CSS does not have a :nth-of-class pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector + could help (showing only for .dept):
.dept {
background: yellow;
}
.dept+.dept {
background-color: orange;
}
.dept+.dept+.dept {
background-color: red;
}
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
</table>
table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
background-color: honeydew;
}
tr.dept:nth-of-type(even){
background-color: red;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Context: I am trying to edit the first only the first row of a table with only two row. It is currently target all tr. I have included all of the HTML at the bottom below the CSS.
Problem 1: The first code block currently targets the first table header in both rows. I need it to only target the first table header in the first row.
Problem 2: The second code block currently targets every table header in each row except the first one of each row. I need the second block of code to only target the last 4 table headers of the first table row.
This is my CSS for the HTML.
thead > tr th:first-of-type{
font-size: 2em;
}
thead > tr th:not(:first-of-type){
background-color: transparent;
color: black;
}
This is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Marlin Internet</title>
<link href="mi_reset.css" rel="stylesheet" />
<link href="mi_styles.css" rel="stylesheet" />
<link href="mi_tables.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="mi_logo.png" alt="Marlin Internet" id="logoimg" />
<nav>
<a id="navicon" href="#"><img src="mi_navicon.png" alt="" /></a>
<ul>
<li>Internet</li>
<li>Home Networking</li>
<li>My Account</li>
<li>Shop</li>
<li>Support</li>
</ul>
</nav>
</header>
<article>
<h1>Accelerate with No Speed Traps</h1>
<p>How do you use the web? Whether it's just you on your PC or your extended
family simultaneously accessing the Internet for gaming, movie watching,
surfing, or music; we have the speed for you — with no hidden fees,
service charges, or other traps. <strong>Marlin Internet</strong> provides a broad variety
of access plans at affordable prices with our exclusive ITIS 2.0 technology.
We provide more than fast access. Take advantage of our 24/7 customer support
(personal help is <em>always</em> on the line), free security tools, email accounts
for the whole family, and exclusive online content.</p>
<table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
/*I am trying to change this header with the first block of code*/
<th rowspan="2"> select a plan </th>
/* I am tying to change these four headers below with the second block of code*/
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>
</article>
<footer>
<nav>
<ul>
<li>About Us</li>
<li>Careers</li>
<li>News</li>
<li>Parental Controls</li>
<li>Our Locations</li>
</ul>
<ul>
<li>Internet</li>
<li>TV</li>
<li>TiVo</li>
<li>Home Security</li>
<li>Phone</li>
</ul>
<ul>
<li>Web Mail</li>
<li>My Account</li>
<li>Support</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="mi_art.png" alt="" class="clipart" />
</footer>
</body>
</html>
I believe this does the trick...
thead > tr:first-of-type th:first-of-type{
font-size: 2em;
color:red;
}
thead > tr:first-of-type th:not(:first-of-type){
background-color: transparent;
color: blue;
}
<table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
/*I am trying to change this header with the first block of code*/
<th rowspan="2"> select a plan </th>
/* I am tying to change these four headers below with the second block of code*/
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>
the problem is that you are using the :first-of-type on the th element ( thead > tr th:first-of-type ), which means that it will apply the styles for the first th element inside each tr element.
The solution is to apply :first-of-type on your tr element, then it will target your first tr then will apply the style only for the first of type :). Also to style the first element of your tr you can use the CSS Selector :fisrt-child
thead > tr:first-of-type th{
background-color: transparent;
color: black;
}
thead > tr:first-of-type th:first-child {
font-size: 2em;
}
thead > tr:first-of-type th{
background-color: transparent;
color: black;
}
thead > tr:first-of-type th:first-child {
font-size: 2em;
}
<table id="pricing">
<colgroup>
<col id="firstCol" />
<col span="4" class="dataCols" />
</colgroup>
<thead>
<tr>
<th rowspan="2"> select a plan </th>
<th> Starter </th>
<th> Prime </th>
<th> Prime Plus </th>
<th> Ultra </th>
</tr>
<tr>
<th> $19.95 <br/> per month </th>
<th> $29.95 <br/> per month </th>
<th> $49.95 <br/> per month </th>
<th> $69.95 <br/> per month </th>
</tr>
</thead>
<tfoot>
<tr>
<th> Summary </th>
<td>
Just the speed you need to send emails, download map directions, and search the Internet for restaurant reviews.
</td>
<td>
A great speed at a great price for the family: kids can play games, adults can pay bills, and everyone can surf at the same time.
</td>
<td>
Super speeds for multiple tasks that require more broadband capacity; ideal for gamers who need fast response times.
</td>
<td>
Perfect for a small business running multiple media streams, demanding reduced lag time and fast data delivery.
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Dowload Speed</th>
<td> 3 Mbps </td>
<td> 15 Mbps </td>
<td> 25 Mbps </td>
<td> 50 Mbps </td>
</tr>
<tr>
<th> Upload Speed </th>
<td> 512 Kbps </td>
<td> 6 Mbps </td>
<td> 10 Mbps </td>
<td> 20 Mbps </td>
</tr>
<tr>
<th> Cloud Storage </th>
<td> 2 GB </td>
<td> 5 GB </td>
<td> 15 GB </td>
<td> 40 GB </td>
</tr>
<tr>
<th> E-mail Accounts </th>
<td> 2 Accounts </td>
<td> 3 Accounts </td>
<td> 5 Accounts </td>
<td> 10 Accounts </td>
</tr>
<tr>
<th> 24/7 Support </th>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
<td> Yes </td>
</tr>
</tbody>
</table>
I have 2 tables that I want to display side by side. So I set the display style property as display: inline-block. The problem is, on both tables, the columns are not taking the full width of the table. There is/are unseen cell(s). Interestingly this does not happen if I remove the DOCTYPE HTML line from the top of the page. The red marked area in the screenshot is my concern.
I have tried setting the font size to 0 of the "tr" and then add my desired font size to the "td". Also tried adding negative right padding/margin, but could not get it to work. Please suggest!
Empty cells at the right of table:
<table id="attn" style="display: inline-block; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="display: inline-block; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
To fix the problem you can use display: inline-table instead of display: inline-block.
Explanation: <table> by default receives display property display: table. This is how it arranges rows/columns and determines how it'll be displayed on the page.
The moment you change that to display: inline-block, <table> looses its property to be a proper table according to CSS. So <tr> <td> etc. don't work as expected, as they shouldn't do inside a display: inline-block element. That's why display: inline-table solves the issue.
What about float instead of inline. Worked for me in IE, Chrome and Firefox.
<!DOCTYPE html>
<table id="attn" style="float:left; border: 1px solid green">
<tr>
<td >
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
<tr>
<td>
Attn: Mr. HM. Mustafizur Rahaman
<footer>Vice President</footer>
</td>
</tr>
</table>
<table id="register" style="float:left; border: 1px solid blue">
<caption id="cap_tab_1">Invoice<caption>
<thead>
<tr>
<td>No.</td>
<td colspan="2">SSL/16/02011</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%">
Day
</td>
<td style="width: 40%">
Month
</td>
<td style="width: 35%">
Year
</td>
</tr>
</tbody>
</table>
I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>
As you can see, I have two tables each inside two divisions . Here is jsFiddle example ! What I want to do is to change the background color of firstDiv's table first column and third column , secondDiv's table second column and fourth column , By CSS only :)
<div id="firstDiv" style="float:left;margin-right:12px;">
<table width="200" border="1" cellpadding="8">
<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>
</div>
<div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<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>
</div>
You are looking at typical usage of nth-child with even/odd selector.
Following should do the trick.
#firstDiv td:nth-child(odd)
{
background-color:#cecece;
}
#secondDiv td:nth-child(even)
{
background-color:#cecece;
}
Fiddle
Another variation:-
#firstDiv td:nth-child(2n+1)
{
background-color:#cecece;
}
#secondDiv td:nth-child(2n+2)
{
background-color:#cecece;
}
If you want to specifically select 1st and 3 alone then you can use
#firstDiv td:nth-child(1),
#firstDiv td:nth-child(3) {
background-color:#cecece;
}
#secondDiv td:nth-child(2),
#secondDiv td:nth-child(4) {
background-color:#cecece;
}
See for support
Use :nth-child pseudo-selector. See the fiddle
Edited:
You can achive it by using nth-child also but all browser does not support nth-child
But the following approach is supported in all browsers..
CSS:
#firstDiv td,
#firstDiv td + td + td{
background-color:#cecece;
}
#firstDiv td + td,
#firstDiv td + td + td + td{
background-color:#fff;
}
#secondDiv td + td,
#secondDiv td + td + td + td{
background-color:#cecece;
}
#secondDiv td,
#secondDiv td + td + td{
background-color:#fff;
}
SEE DEMO
You will need to apply your CSS class to a relevant cell (e.g. 1st TD) of every row in the table. This way an impression will be given that entire column is of a different color. When setup like this if you change background color in CSS class definition - the change will affect all cells in the column at once.