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
Related
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>
Currently I'm using a <table> something like below
<table width="45%" bgcolor="#fff" border="0" style="float: left; margin:2px;">
<tr>
<td><img src="img/default.jpg" style="width:170; height:auto;"></td>
</tr>
</table>
The problem is: how do I make it always on top like this picture without space like my first picture
Here the example table of what I want:
You can just use two divs beneath each other and add for each cell other divs inside of the two main divs.
You can use the "div" tag and that will divide your table to any shape that you want and you will make it like that:-
<div style="width:100px; height:auto; clear:both">
your input here.
</div>
that is for example then put your divide with the same format above but change the style and let the clear attribute like that,This will Separate your divide and will not attach it to any other divide.
I hope that will work. :)
For placing table at the top use margin in css file set it 0 .
**margin: 0px;**
See this example
<link rel="stylesheet" type="text/css" href="css/style.css">
<table border="1" class="myfirsttabel">
<thead>
<th>Name</th>
<th>Email</th>
<th>Mobileno</th>
</thead>
<tbody>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td>
<table border="1" class="tabel">
<thead></thead>
<th>Name</th>
<th>Email</th>
<th>Mobileno</th>
<tbody>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td>
</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> new table</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
</tbody>
</table>
</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
<tr>
<td> My Name is Varun</td>
<td> My email id isvarun#gmail.com</td>
<td> My Mobile No is 8903527945 </td>
</tr>
</tbody>
</table>
and css file
I'm trying to create line breaks after each instance within a table. How can I go about doing this?
<table width="22%" height="18%" align="right" background='../images/table1.png'>
<center>
<tr width = '25%' height = '75px'>
<td>
<p><b><font face='arial'>Title:</font></font> <i>output</i></font></b></p>
</td>
<td>
<p><b><font face='arial'>Title:</font></font> <i>output</i></font></b></p>
</td>
</tr>
</center>
</table>
For that you have to make structure like following:
<table width="22%" height="18%" align="right" background='../images/table1.png'>
<center>
<td>
<b><font face="arial">Title:</font></b></td> <td><i>output</i>
</td>
</tr>
<tr>
<td>
<b><font face="arial">Title:</font> </b></td> <td> <i>output</i>
</td>
</tr>
</table>
Check Fiddle Here.
Edit:
<tr>
<td>
<b><font face="arial">Title:</font></b></td> <td><i>output</i>
</td>
</tr><p></p>
<tr>
<td>
<b><font face="arial">Title:</font> </b></td> <td> <i>output</i>
</td>
</tr>
Here, try this.
I used this table tutorial and just adjusted it to your code. Here's the HTML:
<table width="22%" height="18%" align="right" background="../images/table1.png">
<center>
<tr>
<td><p><b><font face='arial'>Title:</font></font></td>
<td><i>output</i></td>
</tr>
<tr>
<td><p><b><font face='arial'>Title:</font></font></td>
<td><i>output</i></td>
</tr>
</table>
</center>
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/
Here I have 2 tables, I want these 2 tables' width to be same, when the Confirmer name is long the second table expands but the first one remains same, I want both of them to be of same width in any situation, how can that be done? Check this JS Bin example.
HTML:
<table>
<tbody><thead><tr><th>1.5 - STATE</th>
</tr></thead><tr>
<td>
<b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43
</font></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>
Confirmer
</th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</tbody></table>
CSS:
thead{
background-color: grey;
}
table, td
{
background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}
Just add a container and set a width in your container then apply the 100% width to your tables like this
div{
width:400px;
}
table {
width:100%;
}
<div>
<table></table>
<table></table>
</div>
http://jsbin.com/iduciw/32/edit
Why do not you use a single table?
<table>
<tr>
<th colspan="4">1.5 - STATE</th>
</tr>
<tr>
<td colspan="4"><b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43 </font></td>
</tr>
<tr>
<th> Confirmer </th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</table>