I am working plotting one html/php table using following code.
$color=array("#000000","#0000FF","00FFFF","#00FF00","#FFFF00","#7FFFD4","#FF0000","#FF9900","#FFFFFF","#00BFFF");
echo "<br>Color Codes:<br><br>";
echo '<table border="1" cellpadding="0" cellspacing="0"><tr>';
for($i=0;$i< sizeof($color); $i++)
{
echo "<td height='5px' width='10' bgcolor='".$color[$i]."'>($i/10)</td>";
}
echo '</tr>';
echo '</table><br>';
But when I plot this I get following output:
Here height does not decrease with height paramer as I need to just create rectangular boxes.
I replicated your code and didn't see what you're seeing, so I think you may have other styles on the page where you're plotting this that are interfering with the layout. You can take the height attribute off the td elements; then try adding a style="" attribute on the table and testing different properties.
<table style="line-height: 1;"> - try that for starters.
Related
I have PHP script which has nested loops. One first loop get's the data and second loop which checks the data and if quantity is more than 1; it loops through and display each order separately. All works fine.
I'm having some styling issues.
One of my is inside loop.
for($i=0; $i < $row['numberassigned_vnr']; $i++){
?>
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
The number of my second can be anything from 1 to 6. And the "cut" picture will be displayed according to the number of quantity. If quantity, 3 picture will be displayed in a row.
My question is how i can keep the image size same. At the moment the more qunatity loop has the smaller the image become. I would like to keep all images same.
How I can achieve this. Thank you.
Set the <img> height and width to fixed values.
You can achieve this by using CSS.
td {
width: *px*|*%*;
height: *px*|*%*;
}
Or the same to images.
img {
width: *px*|*%*;
height: *px*|*%*;
}
If you realy want all the images to be of the same size irrespective of their number in the row, then give fixed sizes to your images as I suggested in the second option above.
Don't use % for height and width, use px instead as you need fixed size irrespective of row width.
Make sure that you had not given any specific width or height or something like that in class table or table-bordered
Then specify stylings to the td eg.
td {
min-width :256px; 1/6th of Screen size
......
}
Hope it helps
Let me know if you require any further help
Is there a way to check if a table cell has a specific content and to mark that cell with the symbol " ◤ " in the top left corner of that cell?
Thanks
use this find and rerplace function:
function ReplaceCellContent(find, replace)
{
$("#table tr td:contains('" + find + "')").html(replace);
}
You probably don't want to replace the content, just mark interesting cell with the "◤".
You can use CSS :before to do that
<table>
<tr>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>ipsum</td>
<td>lorem</td>
</tr>
</table>
JS:
$("td:contains('ipsum')").addClass('found');
Working example:
http://jsfiddle.net/3NWQD/1/
Example JSFiddle answer: http://jsfiddle.net/ATV4G/1/
Javascript:
function markCell(containingText, replaceWith) { //making our function
$("td:contains('"+containingText+"')").prepend("<span class='abs'>"+replaceWith+" </span>");
}
markCell("first", "◤"); //calling the function
CSS:
.abs {
position: absolute;
}
HTML:
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
</table>
These are the minimum requirements. If you want to beautify the output, you can write further CSS to achieve requirements. (Please check JSFiddle example)
Hope this helps you :)
try this
HTML
<table border="1" id="table">
<tr><th>No</th><th>Player Name</th></tr>
<tr><td>1</td><td>Sachin</td></tr>
<tr><td>2</td><td>Dhoni</td></tr>
<tr><td>3</td><td>Raina</td></tr>
<tr><td>4</td><td>Yuvi</td></tr>
<tr><td>5</td><td>Sachin</td></tr>
</table>
jQuery
function MarkCell(PlayerName)
{
$("td").each(function(){
//alert($(this).text());
if($(this).text() == PlayerName)
{
$(this).html('◤' + PlayerName);
}
});
}
MarkCell('Sachin');
live fiddle here
Here is a PHP solution.
Let's say you have a MySQL database you're connected to and the table has columns 'state_or_province', 'city', and 'country'. If you want to mark all cells with the state or province value of "GA", you would use something like this:
echo "<table>
<tr>
<th>State</th>
<th>City</th>
<th>Country</th>
</tr>";
while($row = mysql_fetch_array($myresults)){
echo "<tr>";
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
else{
echo "<td>".$row["state_or_province"]."</td>";
}
echo "<td>".$row["city"]."</td>
<td>".$row["country"]."</td>
</tr>";
}
echo "</table>";
In your CSS style section, include the following
.red{
background-color: red;
}
In this example, all cells that have the value 'GA' under the 'State' column of our rendered table would appear in a red cell. Just edit the above CSS if you want to have the "◤" symbol appear on the top left hand corner instead
UPDATE
Change
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>".$row["state_or_province"]."</td>";
}
to
if($row["state_or_province"] == "GA"){
echo "<td class = 'red'>◤".$row["state_or_province"]."</td>";
}
and you'll see the triangles inside the text boxes
I have a PHP site that displays a table of images.
Each image has a "backdrop" to them that is user defined. So, users can say "I want the red backdrop" and all images will be displayed, with a 10 pixel border of their color.
Also, it is a staticy backdrop.
To accomplish this, I first echo the static image, then the user color image, then the table image.
echo "<img src='Static.jpg' width='60' height='60' />";
echo "<img src='User$userColor.jpg' width='60' height='60' />";
echo "<img alt='TableImage' width='50' height='50' />";
Currentley, I push the latter two images up by attaching this to them:
style='position:relative; top:-55px; margin-bottom: -55px;'
This seems very hacky. Is there a nice CSS way I can stack the images, so that when I change the size or order I don't have to scan and edit the stylings of every image?
Thank you.
Your question is a bit unclear, but instead of using an image to create the 10px border around the static image, why not just use CSS by adding a class to each image you want the border?
.staticImage { border: 10px solid <?php print $color; ?>; }
You could store the color of border they want in a cookie for example.
CSS:
<img alt='TableImage' width='50' height='50' style="border: 10px solid $userColor"/>
I am trying to display images vertically 5 per row using php and I have achieved it.
I am also using a div and this seems to be creating a problem.
Images are displayed horizontally, but there seems to be a huge space between each image.
Heres the php code:
<table width="500" border="0" cellpadding="2" cellspacing="3">
<tr>
<?php
// get the images for the new videos
$query = "SELECT * FROM videos";
$result = mysql_query($query);
$numimages = 0;
while ($row = mysql_fetch_assoc($result)) {
extract($row);
// extract youtube id
preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
// $matches[ 1 ] should contain the youtube id
?>
<td valign="top">
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="<?php echo $video_title;?>">
<img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
</a>
</div>
</td>
<?php
$numimages++;
if ($numimages%3 == 0)
echo "</tr><tr>";
}
?>
</tr>
</table>
This is the css:
#videogallery {
width:500px;
zoom:1;
}
#videogallery span{
display:block;
}
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-weight:normal;
color:#333333;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
opacity:1;
}
I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).
Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.
It's generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)
90% of that code is completely redundant.
You don't need the tables (in fact, it's considered very poor practice to use them for layout like this these days), and you don't need the wrapper <div> elements around your images.
Your <a> tags are already styled with display:inline-block;, so actually they should already line up horizontally without any of that stuff. Just put them next to each other, without all the extra junk, and they'll line up quite happily for you. You can use margin and padding to put any extra spacing between them that you do require.
All you need beyond that is a single wrapper <div> around the whole lot to enforce a fixed width for the whole block, so that they wrap onto new lines at the right points.
Hope that helps.
there seems to be a huge space between
each gap.
Do you mean a 7 pixel gap?
<table width="500" border="0" cellpadding="2" cellspacing="3">
you may avoid <table> alltogether by using div and css float see this http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
See http://jsfiddle.net/ZfyRb/
I have one table in loop which come under li:
<?php
for($i=1;$i<=$tc;$i++)
{
$row=mysql_fetch_array($result);
?>
<li style="list-style:none; margin-left:-20px">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hline" style="width:267px"><?php echo $row['tit'] .",". $row['name'] ?></td>
<td class="vline" style="width:1px"> </td>
<td class="hline" style="width:100px"><?php echo $row['city']; ?></td>
</tr>
</table>
</li>
<?php
}
?>
The output comes like this:
alt text http://img20.imageshack.us/img20/4153/67396040.gif
I can't put table outside the loop, due to <li> sorting
if you can't use table outside the loop then i think best option will be use of
<div>
statement
for example
<div class="q-s na">
<div class="st" style="margin-right:10px; width:150px">
<div class="m-c"><?php echo $row['tit'] .",". $row['name'] ?></div>
</div>
this will be same as you one
<td>
you can define style according to your requirements.
for example
<style>
.q-s{overflow:hidden;width:664px;float:left;
padding-top:2px; padding-bottom:2px; height:25px}
.na .st{ float:left;}
.na .m-c {border-bottom:1px dotted #999; padding-bottom:10px; height:15px}
</style>
i can't put table outside the loop.
Why not? This is where it belongs. After all, you (logically) produce one table, not many of them. No need for the list item, either.
If you're unable to put the table outside of the loop, you should probably just use tags rather than creating tables, as you're defeating the purpose of even having a table by making each table a single row and trying to stack them.
Another thing to note if you are going to stick with tables:
If you're hard-coding the table width AND all of the table cell (column) widths, it may cause unexpected issues when they don't add up:
Table width = 600px
Cells = 267 + 1 + 100 = 368px