Ive been trying to increase the font size for the TH tag via the css style sheet:
th {
color:#D5DDE5;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
}
for the following code:
<?php
include ('connect-mysql.php');
$sqlget="SELECT * FROM data ORDER BY score desc LIMIT 10";
$sqldata= mysqli_query($conn, $sqlget);
echo "<table width='1500'>";
echo "<tr>";
echo "<th>Position</th>";
echo "<th>First Name</th>";
echo "<th>Last Name</th>";
echo "<th>Score</th>";
echo "</tr>";
$counter = 1;
while($row = mysqli_fetch_array($sqldata, MYSQLI_ASSOC)) {
echo "<tr><td width='5%'>";
echo "<b>".$counter."</b>";
echo "</td><td>";
echo "<div style='font-size:40px'>";
echo "<b>".$row['firstName']."</b>";
echo "</div>";
echo "</td><td>";
echo "<div style='font-size:40px'>";
echo "<b>".$row['lastName']."</b>";
echo "</div>";
echo "</td><td width='20%'>";
echo "<b>".$row['score']."</b>";
echo "</td></tr>";
$counter++;
}
echo "</table>";
?>
As you can see i have been using inline css styles as the external style sheet seems to have jammed, i would like to increase the font size of the TH tags but there is no response when changing 'font-size:23px'
What am i doing wrong ?
Try to change font-size in the browser development panel.
It will show you if there are some other css instructions that overwrites yours (or any other reason).
Thanks for this I managed to get it to work using kunals help.
echo "<th style='font-size:2.0em'>Position</th>";
using "" instead of ''inside the th tag causes php errors for me.
using px caused formatting issues so i used em
I am still wondering why my CSS style sheet isnt working :/
Make it like this, and you're done...
echo "<table width='1500'>";
echo "<tr>";
echo "<th style="font-size:23px;">Position</th>";
echo "<th style="font-size:23px;">First Name</th>";
echo "<th style="font-size:23px;">Last Name</th>";
echo "<th style="font-size:23px;">Score</th>";
echo "</tr>";
add inline css to th tags...
Related
I try to insert data from my php array into an html table. The code for this looks like
echo "<table style='border: 1px solid black'><tbody>";
foreach(['country','counter'] as $attribute){
echo "<tr><td>".$attribute."</td>";
foreach($analysis_data as $row){
echo "<td style='border: 1px solid black'>".$row[$attribute]."<td>";
}
echo '</tr>';
When the code is executed it looks like
I want the table to be vertical and not horizontal like this. What do I need to change in my code?
Interchange your two loops.
echo "<table style='border: 1px solid black'><tbody>";
echo "<tr><th>country</th><th>counter</th></tr>";
for ($analysis_data as $row) {
echo '<tr>';
foreach (['country','counter'] as $attribute){
echo "<td style='border: 1px solid black'>".$row[$attribute]."<td>";
}
echo '</tr>';
}
I'm generating table in a foreach loop
echo "<tr>";
echo "<td align='left' bgcolor='$bgclr'>".$monthName."</td>";
echo "<td align='center' bgcolor='$bgclr'>".$id."</td>";
echo "<td align='center' bgcolor='$bgclr'>".$total."</td>"
echo "</tr>";
I need to increase font size of the table, but i'm not sure how. Does the html table has attribute to set font size or I should use CSS ?
Just use font style css in style attribute :
echo "<tr>";
echo "<td align='left' bgcolor='$bgclr' style='font-size:10px'>".$monthName."</td>";
echo "<td align='center' bgcolor='$bgclr' style='font-size:10px'>".$id."</td>";
echo "<td align='center' bgcolor='$bgclr' style='font-size:10px'>".$total."</td>"
echo "</tr>";
use the html styling on the echoed elements. For example echo '<table style="font-size: 100px">';
You need to define font size in one variable and then use in inline as below code:
foreach{
$fontsize = 'font-size: '.((isset(FONT_SIZE_IN_FOREACH))?FONT_SIZE_IN_FOREACH:12);
echo "<tr>";
echo "<td align='left' bgcolor='$bgclr' style='$fontsize'>".$monthName."</td>";
echo "<td align='center' bgcolor='$bgclr'>".$id."</td>";
echo "<td align='center' bgcolor='$bgclr'>".$total."</td>"
echo "</tr>";
}
You can add class to the table and write css for that class.
HTML:
<table class='fontsize'>
</table>
CSS:
.fontsize {
font-size:16px;
}
I am trying to fetch the images from the database and display 2 images in each row using php mysql. My code displays only 2 images and rest of the images are not displayed. Here is the code
CSS
.image-inner {
position: relative;
width: 150px;
display: inline-block;
}
PHP
$res=mysql_query("select * from table1");
echo "<div class=view1>";
$i=0;
echo "<table>";
echo "<tr>";
while($row=mysql_fetch_array($res)){
if($i % 4 == 0) {
echo "<td>";
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image1'] ).'" class=image-inner height="200" width="200"/>';
echo "<br>";
echo $row['name1'];
echo "<br>";
echo $row['designation'];
}
echo "</td>";
$i++;
}
echo "</tr>";
echo "</table>";
?>
Hi I'm creating a questionnaire. The questions and their answers are stored in a table like so:
Now, I want to display the questions and their answers in a table where I get the questions and their possible answers on different rows. Like so:
In my php file, I echo the table and the rows but I cannot figure out how to put the questions and answer in different rows. here is how it looks like:
and here is my php code:
<?php
session_start();
$status=$_GET["status"];
include 'dbh.inc.php';
?>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
text-align: left;
padding: 8px;
}
#td_box{
text-align: center;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #006689;
color: white;
}
</style>
</head>
<body>
<?php
if ($status=="disp") {
$sql="SELECT * FROM questions";
$result = mysqli_query($conn,$sql);
echo "<table>";
while ($row=mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>"; echo $row["question"]; echo "</td>";
echo "<td>"; echo $row["optionA"];echo $row["optionB"];echo $row["optionC"];
echo $row["optionD"];echo $row["optionE"];echo "</td>";
}
}
echo "</table>";
?>
</body>
</html>
Try:
<?php
if ($status=="disp") {
$sql="SELECT * FROM questions";
$result = mysqli_query($conn,$sql);
echo "<table>";
while ($row=mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"; echo $row["optionA"];echo $row["optionB"];echo $row["optionC"];
echo $row["optionD"];echo $row["optionE"];echo "</td>";
echo "</tr>";
}
}
echo "</table>";
?>
What I did:
I added a </tr> after your question echo and opend a new one directly after. Then I closed that <tr> after your last <td> as you forgot to do that.
1st : Put all option radio buttons in another tr .
2nd : Maintain proper name attribute for radio button .name="question[$row['question_id']]"
3rd : And use colspan="4" for question td
while ($row=mysqli_fetch_array($result)) {
echo "<tr >";
echo "<td colspan='4'>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionA']\" >".$row['optionA'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionB']\" >".$row['optionB'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionC']\" >".$row['optionC'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionD']\" >".$row['optionD'];
echo "</td>";
echo "<td>";
echo "<input type=\"radio\" name=\"question[$row['question_id']]\" value=\"$row['optionE']\" >".$row['optionE'];
echo "</td>";
echo "</tr>";
}
echo "<tr>";
echo "<td colspan='4'>"; echo $row["question"]; echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"; echo $row["optionA"];echo "</td>";
echo "<td>"; echo $row["optionB"];echo "</td>";
echo "<td>"; echo $row["optionC"];echo "</td>";
echo "<td>"; echo $row["optionD"];echo "</td>";
echo "</tr>";
this way you will have proper answers in tabular format in aligned manner
I am working with a php document that has tables as well as an image, the way its set up is I have a table with 3 columns, two with text and one with a picture. The problem that I am running into is that the images are all different sizes which cause my text lines to cause spacing in between them, is there a way to format the text to retain its original formatting? Here is an example of what I am talking about http://www.cnghl.biz/cnghldb/test.php?PlayerID=2818
Here is the CSS
<style>
a {text-decoration:none;}
}
td {
vertical-align: top;
}
td img {
vertical-align: top;
}
.space {
line-height: .3 em;
}
.wrap {
float:right;
}
</style>
And here is the PHP
Echo "<td width='659'><div align='center'>";
Echo "<table width='602' border='0'>";
Echo "<tr>";
Echo "<td colspan='3'><h1>".$row['FirstName']." ".$row['LastName']."</h1> </td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td width='164'><strong>Birthdate:</strong>".$row['DOB']."</td>";
$DOB = $row[DOB]; //dd.mm.yyyy
$user_date = new DateTime($DOB);
$curr_date = new DateTime();
$age_cal = $curr_date->diff($user_date);
Echo "<td width='219'><strong>Age:</strong>".$age_cal->y;"</td>";
Echo "<td width='205' rowspan='6'><div align='center'><img src=\"http://www.cnghl.biz/cnghldb/images/".$iPlayerID.".jpg\">";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Nation:</strong>".$row['Nation']."</td>";
Echo "<td><strong>CNGHL Team:</strong>".$row['CNGHLRights']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Position:</strong>".$row['Position']. "</td>";
Echo "<td><strong>Weight:</strong>".$row['Weight']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Height:</strong>".$row['Height']. "</td>";
Echo "<td><strong>NHL Team:</strong>".$row['Team']. "</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td><strong>Draft Year:</strong>".$row['CNDraftYR']."</td>";
Echo "<td><strong>Draft Position:</strong>".$row['CNDraftPOS']."</td>";
Echo "</tr>";
Echo "<tr>";
Echo "<td height='25'><strong>Drafted By:</strong>".$row['DrTeam']."</td>";
Echo "<td><strong>Current Salary:</strong></td>";
Echo "</tr>";
Echo "</table>";
Echo "</div></td>";
Echo "<td width='141'> </td>";
Echo "</tr>";
Echo "</table>";
Echo "</div>";
I have tried to adjust the size of the image but that does not solve the problem, any help would be greatly appreciated.
Definitely do not use tables for layout purposes. By the way, this is the expected behavior of HTML tables, stretching their size to the content.
You can achieve this using divs, both solving your problem and having a more semantic markup, and having a cleaner markup.
I would also suggest you wrap your player's data into a Definition list (dl element) for a more semantic approach.
Example implementation
If the problem is the images being different sizes, you could give each image a specific width. Or if you don't want to adjust the images themselves, give the div/td that the image is in a specific width and height that is equal to the largest image and doesn't change.
Your rowspan is set to 6 but you have 7 <tr> in your table. The td { vertical-align: top; } is what you need for your CSS.