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
Related
This is my problem:
<table border= '1' width= '100%' >
<tr>
<td> Apple </td>
<td> Banana </td>
<td> Strawberry </td>
</tr>
<tr>
<td> <table border='1' width= '100%'> </td>
<td> Healthy </td>
<td> Fruits </td>
<td> Banana </td>
</table>
</tr>
</table>
The second row is only one column wide but I want it to be three columns wide. And from what I tested colspan doesnt work on the nested table.
Is it even possible to do what I want?
It's not totally clear what the layout needs to be but once you fix the html structure so cell holding nested table is closed properly, and it's cells have <tr> and add some colspans the following should get you close to what you want.
Note that nesting tables is not used a lot any more. It is very old school
<table border='1' width='100%'>
<tr>
<td> Apple </td>
<td> Banana </td>
<td> Strawberry </td>
</tr>
<tr>
<td colspan='2'>
<table border='1' width='100%'>
<tr>
<td> Healthy </td>
<td> Fruits </td>
<td> Banana </td>
</tr>
</table>
</td>
<td>Last Cell</td>
</tr>
</table>
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>
I have a very peculiar use case which requires me to use two ng-repeats.
One array is of dates and another contains some date in form of associated array with argument as those dates.
<tbody>
<tr ng-repeat="date in dates">
<!-- <tr ng-repeat="datum in data[date]"> -->
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
<!-- </tr> -->
</tr>
</tbody>
Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?
You can repeat <tbody> and then repeat <tr> within each <tbody>
<tbody ng-repeat="date in dates">
<tr ng-repeat="datum in data[date]">
There are no limits on having more than one <tbody>
Another way
<table>
<tbody>
<tr ng-if="0" ng-repeat-start="date in dates"></tr>
<tr ng-repeat="datum in data[date]">
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</tbody>
</table>
This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.
You can always other tags inside the td.
<tbody>
<tr>
<tr>
<div>here</div>
<p>there</p>
</tr>
</tr>
</tbody>
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
I want to know how do you skip a tag in HTML5.0. I mean literally, without CSS. Instead of an empty box, I want it to be filled in, not just blank. Any help would be appreciated
You can use colspan or rowspan.
<table>
<tr>
<td colspan="2">
Header
</td>
</tr>
<tr>
<td>
Text
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
Text
</td>
<td>
Text
</td>
</tr>
</table>