CODEWITHSUNDEEP
phphtml
Ahil Khan
Ahil Khan

Reputation: 217

how to add a class in html which embeded in echo php code

Image of table

I am using a table which embeded in echo php code. I am assigning a table class and styling of table but on web page is not effecting in table

<?php 
 echo "<table><tr><td>1. Entry Test</td><td>1 Hour</td></tr>
       <tr><td>2. Refreshments</td><td>30 Minutes</td></tr>
       <tr><td>3. Tour of campus Labs and Hanger Facility</td><td>1 
        Hour</td></tr>
       <tr><td>4. Interviews</td><td>(For all shortlisted candidates only)</td></tr></table>"";
?>

issue is that how to add class in this format. I am beginner in php development

table image 2

Upvotes: 0

Views: 1440

Answers (4)

Joseph_J
Joseph_J

Reputation: 3669

This is probably preference but I never echo out HTML using double quotes. Using single quotes allows you to use double quotes in your HTML without escaping anything. I also structure my code so I can read it better.

Here is an example. I just added class="myTableClass" into your table div.

echo 
 '<table class"myTableClass">
    <tr>
      <td>1. Entry Test</td>
      <td>1 Hour</td>
    </tr>
    <tr>
      <td>2. Refreshments</td>
      <td>30 Minutes</td>
      </tr>
    <tr>
      <td>3. Tour of campus Labs and Hanger Facility</td>
      <td>1 Hour</td>
    </tr>
    <tr>
      <td>4. Interviews</td>
      <td>(For all shortlisted candidates only)</td>
    </tr>
  </table>';

A very basic CSS script looks like this:

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

.myTableClass {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}

You would name it something like mystyle.css and you would install it into your root directory.

Then in your webpage you would reference the CSS by including into your HTML. This is typically placed inside your <head> tag.

Like so:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

I took this example from w3schools. Here is a link for you to look at.
How to CSS

It looks like in your case you are trying to adopt a CSS that is currently used on your site. You will have to see where the css is installed in your directory and examine it for the table properties.

Another way to do it would be to examine a table that works like you want and look at the css class that is being used.

Hope it helps.

Upvotes: 2

jagdish singh
jagdish singh

Reputation: 21

    You can add like this. 
<?php 

$html = "<table class='asdfd'><tr><td>1. Entry Test</td><td>1 Hour</td></tr> <tr><td>2. Refreshments</td><td>30 Minutes</td></tr><tr><td>3. Tour of campus Labs and Hanger Facility</td><td>1 Hour</td></tr><tr><td>4. Interviews</td><td>(For all shortlisted candidates only)</td></tr></table>";

 echo $html;
?>

//with single quote 
    <?php 

    $html = '<table class="hti"><tr><td>1. Entry Test</td><td>1 Hour</td></tr>
           <tr><td>2. Refreshments</td><td>30 Minutes</td></tr>
           <tr><td>3. Tour of campus Labs and Hanger Facility</td><td>1 
            Hour</td></tr>
           <tr><td>4. Interviews</td><td>(For all shortlisted candidates only)</td></tr></table>';

    echo $html;
    ?>

Upvotes: 0

Gufran Hasan
Gufran Hasan

Reputation: 9373

As you are concatenating the string with a double quote "" now you should use single quote '' to add the new attribute in table tags as:

<?php 
 echo "<table class='table_class_name' style='color:#444;'>
       <tr class='tr_class_name'><td>1. Entry Test</td><td>1 Hour</td></tr>
       <tr><td>2. Refreshments</td><td>30 Minutes</td></tr>
       <tr><td>3. Tour of campus Labs and Hanger Facility</td><td>1 
        Hour</td></tr>
       <tr><td>4. Interviews</td><td>(For all shortlisted candidates only)</td></tr></table>";
?>

Upvotes: 0

Preeti
Preeti

Reputation: 152

You can add class OR styling to your code as below:

echo "<table class='testTable' style='border:1px solid red;'><tr><td>1. Entry Test</td><td>1 Hour</td></tr>
       <tr><td>2. Refreshments</td><td>30 Minutes</td></tr>
       <tr><td>3. Tour of campus Labs and Hanger Facility</td><td>1 
        Hour</td></tr>
       <tr><td>4. Interviews</td><td>(For all shortlisted candidates only)</td></tr></table>";

In your code at end you have ""; which should only be ";

Upvotes: 2

Related Questions