Grill html and CSS - html

I wanted to know how I could create a grill for my website, I wanted this to be like a 3*7 table with equal sizes, as you can see in the picture and that I could replace the spaces with an image in the future. Thanks!


You can try using display: grid property
display: grid;
grid-template-columns: auto auto auto auto auto auto auto;
grid-template-rows: auto auto auto;
here i have put width of Columns and Rows to auto you can put it according to your need also go ahead and read about
CSS Display Grid


Using <table> tag :
<table style="width: 50%;" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Related

Even Odd rows for only one column in tables?

I'm working with tables to display data on a webpage.
Right now I've got even odd for <tr> to have the rows alternating colors. However, I am going to be freezing the 1st column of the table and having the remaining columns scroll to the left and right.
At the moment, the columns that are scrolling to the left are being seen under the frozen column. If I apply a background color to the cells in the frozen column, the columns that are no longer to be displayed when scrolled to the left are then truly hidden.
I'm calling the first column's cells by using td:nth-child(1).
The problem is that I am using alternating row colors so assigning a background color to td:nth-child(1) makes all cells in that 1st row the same color.
Is it possible to add (odd) and (even) to the nth-child call?
I'd like to use a better method (if there is one) than just assigning classes to each of the cells in the first column.
(NOTE: Added my code 02/12/2018)
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
table.sidebyside th:nth-child(1), table.sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
table.sidebyside th:nth-child(2), table.sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
table.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
table.sidebyside td:nth-child(1) (odd) {
background-color: #fff;
}
table.sidebyside tr:nth-child (even) > td:nth-child(1) {
background-color: rgba(0,0,0,.05);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th>
</th>
<th>
Bronze-High Deductible
</th>
<th>
Silver-HMO
</th>
<th>
Gold-PPO Low
</th>
<th>
Gold-PPO Med
</th>
</tr>
<tr>
<td>
<b>
Score: </b>
</td>
<td>
<span class="text-green">
95 </span>
</td>
<td>
<span class="text-yellow">
77 </span>
</td>
<td>
<span class="text-danger">
32 </span>
</td>
<td>
<span class="text-danger">
24 </span>
</td>
</tr>
<tr>
<td>
<b>
RealCost: </b>
</td>
<td>
$4,7772.32
</td>
<td>
$6,024.81
</td>
<td>
$8,194.55
</td>
<td>
$8,194.55
</td>
</tr>
<tr>
<td>
<b>
Premiums: </b>
</td>
<td>
$2,400.00
</td>
<td>
$3,100.00
</td>
<td>
$3,956.00
</td>
<td>
$3,956.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Services: </b>
</td>
<td>
$1,575.00
</td>
<td>
$2,239.00
</td>
<td>
$2,983.00
</td>
<td>
$2,983.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Medications: </b>
</td>
<td>
$797.32
</td>
<td>
$927.32
</td>
<td>
$1,198.46
</td>
<td>
$1,198.46
</td>
</tr>
<tr>
<td>
</td>
<td colspan="4">
</td>
</tr>
<tr>
<td>
<b>
Individual Deductible: </b>
</td>
<td>
$3,350.00
</td>
<td>
$3,850.00
</td>
<td>
$4,250.00
</td>
<td>
$4,250.00
</td>
</tr>
<tr>
<td>
<b>
Individual Out of Pocket Maximum: </b>
</td>
<td>
$6,350.00
</td>
<td>
$6,850.00
</td>
<td>
$7,050.00
</td>
<td>
$7,050.00
</td>
</tr>
<tr>
<td>
<b>
Family Deductible: </b>
</td>
<td>
$6,650.00
</td>
<td>
$6,950.00
</td>
<td>
$7,200.00
</td>
<td>
$7,200.00
</td>
</tr>
<tr>
<td>
<b>
Family Out of Pocket Maximum: </b>
</td>
<td>
$12,900.00
</td>
<td>
$13,900.00
</td>
<td>
$15,400.00
</td>
<td>
$15,400.00
</td>
</tr>
<tr>
<td>
<b>
Coinsurance: </b>
</td>
<td>
20%
</td>
<td>
20%
</td>
<td>
30%
</td>
<td>
30%
</td>
</tr>
<tr>
<td>
<b>
Copayment: </b>
</td>
<td>
$25.00
</td>
<td>
$30.00
</td>
<td>
$40.00
</td>
<td>
$40.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Generic: </b>
</td>
<td>
$20.00
</td>
<td>
$35.00
</td>
<td>
$45.00
</td>
<td>
$45.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Brand: </b>
</td>
<td>
$40.00
</td>
<td>
$45.00
</td>
<td>
$60.00
</td>
<td>
$60.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Non Preferred: </b>
</td>
<td>
$60.00
</td>
<td>
$70.00
</td>
<td>
$80.00
</td>
<td>
$80.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Generic: </b>
</td>
<td>
$60.00
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$90.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Brand: </b>
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$100.00
</td>
<td>
$100.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Non Preferred: </b>
</td>
<td>
$120.00
</td>
<td>
$140.00
</td>
<td>
$175.00
</td>
<td>
$175.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

For even use
table tr td:nth-child(even)
And for odd use
table tr td:nth-child(odd)
Moreover, always prefer to use the exact descendants you want to apply your css on to avoid any invalid html markup to be selected by your stylesheets.

https://jsfiddle.net/1b329d8u/2/ is what I was trying to achieve.
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
.sidebyside th:nth-child(1), .sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
.sidebyside th:nth-child(2), .sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
.sidebyside tr:nth-child(even) > td:nth-child(1) {
background-color: #fff;
}
.sidebyside tr:nth-child(odd) > td:nth-child(1) {
background-color: #f7fafa;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th></th>
<th>Bronze-High Deductible</th>
<th>Silver-HMO</th>
<th>Gold-PPO Low</th>
<th>Gold-PPO Med</th>
</tr>
<tr>
<td><b>Score: </b></td>
<td><span class="text-green">95 </span></td>
<td><span class="text-yellow">77 </span></td>
<td><span class="text-danger">32 </span></td>
<td><span class="text-danger">24 </span></td>
</tr>
<tr>
<td><b>RealCost: </b></td>
<td>$4,7772.32</td>
<td>$6,024.81</td>
<td>$8,194.55</td>
<td>$8,194.55</td>
</tr>
<tr>
<td><b>Premiums: </b></td>
<td>$2,400.00</td>
<td>$3,100.00</td>
<td>$3,956.00</td>
<td>$3,956.00</td>
</tr>
<tr>
<td><b>Cost of Services: </b></td>
<td>$1,575.00</td>
<td>$2,239.00</td>
<td>$2,983.00</td>
<td>$2,983.00</td>
</tr>
<tr>
<td><b>Cost of Medications: </b></td>
<td>$797.32</td>
<td>$927.32</td>
<td>$1,198.46</td>
<td>$1,198.46</td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td><b>Individual Deductible: </b></td>
<td>$3,350.00</td>
<td>$3,850.00</td>
<td>$4,250.00</td>
<td>$4,250.00</td>
</tr>
<tr>
<td><b>Individual Out of Pocket Maximum: </b></td>
<td>$6,350.00</td>
<td>$6,850.00</td>
<td>$7,050.00</td>
<td>$7,050.00</td>
</tr>
<tr>
<td><b>Family Deductible: </b></td>
<td>$6,650.00</td>
<td>$6,950.00</td>
<td>$7,200.00</td>
<td>$7,200.00</td>
</tr>
<tr>
<td><b>Family Out of Pocket Maximum: </b></td>
<td>$12,900.00</td>
<td>$13,900.00</td>
<td>$15,400.00</td>
<td>$15,400.00</td>
</tr>
<tr>
<td><b>Coinsurance: </b></td>
<td>20%</td>
<td>20%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td><b>Copayment: </b></td>
<td>$25.00</td>
<td>$30.00</td>
<td>$40.00</td>
<td>$40.00</td>
</tr>
<tr>
<td><b>Pharmacy Generic: </b></td>
<td>$20.00</td>
<td>$35.00</td>
<td>$45.00</td>
<td>$45.00</td>
</tr>
<tr>
<td><b>Pharmacy Brand: </b></td>
<td>$40.00</td>
<td>$45.00</td>
<td>$60.00</td>
<td>$60.00</td>
</tr>
<tr>
<td><b>Pharmacy Non Preferred: </b></td>
<td>$60.00</td>
<td>$70.00</td>
<td>$80.00</td>
<td>$80.00</td>
</tr>
<tr>
<td><b>Mail Order Generic: </b></td>
<td>$60.00</td>
<td>$80.00</td>
<td>$90.00</td>
<td>$90.00</td>
</tr>
<tr>
<td><b>Mail Order Brand: </b></td>
<td>$80.00</td>
<td>$90.00</td>
<td>$100.00</td>
<td>$100.00</td>
</tr>
<tr>
<td><b>Mail Order Non Preferred: </b></td>
<td>$120.00</td>
<td>$140.00</td>
<td>$175.00</td>
<td>$175.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thanks #TylerH for the solution. I had to use tr:nth-child(even) > td:nth-child(1) so I could target the 1st column only and use (even) and (odd) at the tr level.

Merging cells in HTML ruins the layout

I am working on my project at the moment, so I tried to create a time table but the problem is when I go to merge two or more cells it would ruin the entire layout and creating an extra cell on the right hand side.
I dont know how to add the code, but please click on the links so you can see what I am talking about.
https://gyazo.com/2d3367a8c79f42d5b2e44a3182f10c20
https://gyazo.com/4c8a396173ee8282649a2cca846eaeee

When you go to merge two or more cells in a column you mast delete the cell in a neighbor row.
When you go to merge two or more cells in a row you mast delete the cell in the same row.
<table border="1" width="100%">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
// <td> </td> this is for delete
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td colspan="2"> </td>
<td> </td>
// <td> </td> this is for delete
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Position a HTML table element on top of img element

I want to be able to place an html table on top of a image using css. I want to move my table up so that it looks like the picture below:
This is what I currently have it as:
And I want it to look like this:
This is what my code looks like:
<img src="#Url.Content(" ~/images/sortByDivisionControl_BG2.png ")" width="570">
<table id="locations-table" style="margin:0 auto;">
<thead>
<tr>
<th colspan="3">
Locations
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a>Anchorage, AK</a>
</td>
<td>
<a>Spokane, WA</a>
</td>
<td>
<a>Coburg, OR</a>
</td>
</tr>
<tr>
<td>
<a>Kapolei, HI</a>
</td>
<td>
<a>Toledo, WA</a>
</td>
<td>
<a>Medford, OR</a>
</td>
</tr>
<tr>
<td>
<a>Snohomish, WA</a>
</td>
<td>
<a>Ridgefield, WA</a>
</td>
<td>
<a>Redmond, OR</a>
</td>
</tr>
<tr>
<td>
<a>Kent, WA</a>
</td>
<td>
<a>Bend, OR</a>
</td>
<td>
<a>Portland, OR</a>
</td>
</tr>
</tbody>
</table>

This is what background images are for. I would do this instead:
<table id="locations-table" style="margin:0 auto; background-image: #Url.Content("~/images/sortByDivisionControl_BG2.png")">

You can set z-index also using css.
For information :
Check This

How to split a cell into columns so they have the same width as columns below them in a row

I have the following table, with two header cells. The second header cell needs to be split into two rows, with the bottom row split further into 6 columns (q1, q2, q3 etc). These columns should be the same width as those in the row below them. Please see the image and fiddle to see what I am trying to achieve. Any help would be great.
http://jsfiddle.net/CPSs9/
Fiddle here http://jsfiddle.net/CPSs9/
My code is as follows:
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<th width="120">Booboo</th>
<th colspan="5">blah blah</th>
</tr>
<tr>
<td> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
<td width="40"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

It is very easy. All you need to do is use the rowspan attribute on the first th and add another row to the table. Like so: http://jsfiddle.net/skip405/CPSs9/1/

How to place image on left side of a table in HTML5

I am using HTML5.
I want to have a page in which, it has a image and table side by side
Means,
we can consider <table>
In which, I have a <tr>.
In <tr>, I have 2 <td></td>
In one <td>,I want to display an image and in another<td>,
I want to display a <table> having some fields.
But it is not displaying properly.
second <td> data is displaying below the first <td>
my scenario is like:
<table>
<tr>
<td>
<image src=""></image>
</td>
<td>
<table>
<tr>
<td>
field1
</td>
<td>
textbox
</td>
</tr>
<tr>
<td>
field 2
</td>
<td>
textbox
</td>
</tr>
<tr>
<td>
button
</td>
</tr>
</table>
</td>
</tr>
</table>
Screen is displaying like this:
how can I do this?
Updated:
My ASP.NET MVC View:
<table>
<tr>
<td>
<div style="width: auto; height: auto;">
<image src="../../Images/Image1.jpg"></image>
</div>
</td>
<td>
<div style="width: auto; height: auto;">
<table>
<tr>
<td colspan="2" align="center">
Application1
</td>
</tr>
<tr>
<td colspan="3">
<%: Html.ValidationSummary(true, "Login was unsuccessful.")%>
</td>
</tr>
<tr>
<td>
<%: Html.LocalizedLabelFor(m => m.LoginID)%>
</td>
<td>
<%: Html.TextBoxFor(m => m.LoginID)%><br />
</td>
</tr>
<tr>
<td>
<%: Html.LocalizedLabelFor(m => m.Password)%>
</td>
<td>
<%: Html.PasswordFor(m => m.Password)%><br />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Log On"
name="Login"/>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>