Styling Tables with Bootstrap CSS and Integrating Database Data

Currently, I am utilizing the code snippet below to retrieve and display data stored in a database. Although everything functions correctly, I am encountering an issue with displaying it using Bootstrap CSS. Strangely, when I try copying an example of a table (code 2 below) with bootstrap, it works perfectly fine (indicating that all necessary Bootstrap files have been included correctly).

---------------Code 1---------------

$query = "SELECT * FROM ..."; 
$result = mysql_query($query);

echo "<table>"; 

while($row = mysql_fetch_array($result)){   
echo "<tr><td>" . $row['name'] . "</td>
               <td>" . $row['...'] . "</td>
               <td>" . $row['...'] . "</td>
               <td>" . $row['...'] . "</td>
               <td>" . $row['...'] . "</td>
               <td>" . $row['...'] . "</td>
               </tr>";
}echo "</table>";
 mysql_close(); //Make sure to close out the database connection
?>

--------------Code 2-------------

<div class="bs-example">
    <table class="table">
        <thead>
            <tr>
                <th>Row</th>
                <th>Bill</th>
                <th>Payment Date</th>
                <th>Payment Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>Credit Card</td>
                <td>04/07/2014</td>
                <td>Call in to confirm</td>
            </tr>

            <tr class="danger">
                <td>5</td>
                <td>Telephone</td>
                <td>06/07/2014</td>
                <td>Due</td>
            </tr>
        </tbody>
    </table>

------------Updated Example Solution----------

    echo "<table class='table'>";
  while($row = mysql_fetch_array($result)){
    echo "<tr class='info'><td>" . $row['...'] . "</td>
                   <td>" . $row['...'] . "</td>
                   <td>" . $row['...'] . "</td>
                   <td>" . $row['...'] . "</td>
                   <td>" . $row['...'] . "</td>
                   <td>" . $row['...'] . "</td>
                   </tr>"; 
    }
    echo "</table>"; 
    mysql_close(); 

    ?>

Answer №1

Make sure you include the table style:

echo "<table class='table-style'>"; 

Answer №2

The power of bootstrap lies within its versatile class attributes. By incorporating specific bootstrap class attributes into your code, such as table, active, and danger, you can effectively structure your table. The distinction between code 1 and code 2 is evident in the class attributes used. For further insight into the functionality of each attribute, consider reading through this informative blog post.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps for increasing text input size on an html page?

I was actually using w3schools, so I'm a bit lost now. On this repl called BatCoder, you can write and save Bat files. And currently, I need to expand the text input! Would really appreciate any help as I am still learning how to code. No errors, j ...

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

Transforming jQuery into pure Javascript code

UPDATE SUCCESS! I've cracked the code. The solution was to include jQuery by adding it in Joomla through the template/index.php file with this line under "//Add Javascript Frameworks" JHtml::_('jquery.framework');. PROGRESS I'm seekin ...

The Bootstrap table fails to display any data retrieved from the server

I recently attempted to implement pagination using this resource: After setting up the HTML table on my page and confirming that the server-side code is functioning properly by checking the Network tab in the F12 tools, I ran into an issue. The data retur ...

Issue with PHP/MySQL registration page failing to save user information to database

As I work on developing my website that includes user registration and login functionality, I encountered an issue where the registration page was not loading properly. Initially, the registration process worked perfectly, but the next day, upon trying to ...

JavaScript code that loads a specific DIV element only after the entire webpage has finished loading

How can I ensure that the DIV "image" is loaded only after the entire page has finished loading? What JavaScript code should I use? <div class="row"> <div class="image"> CONTENT </div> </div> I plan to execute the functio ...

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

Tips for successfully sending data to an ng-include controller

So, I've got this ng-include html element, and I'm trying to figure out how to pass data from an external source to the controller. The primary controller is responsible for fetching json data from a http webservice, and then parsing that data i ...

How to display only a portion of content using UI Bootstrap collapse feature

In my Angular.js application, I currently have a row of buttons that open up new routes to display partial views. Now, I need to modify some of these buttons to trigger a ui.bootstrap Collapse feature with the view inside it. The template code from the ui. ...

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

What steps can be taken to achieve a smooth scrolling speed adjustment?

Upon discovering this website, I was impressed by its smooth scrolling features. The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, p ...

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

The information displayed in the tooltip exceeds the capacity of the column

Is there a way to display data in a tooltip when a column contains long sentences due to width constraints? To achieve this, I have implemented a renderer function as shown below: { header: xppo.st('SDE_INCIDENT_DESCRIPTION1'), width: 1 ...

What causes the appearance of a slight space between a child element positioned absolutely and its parent element with borders? All the margins, padding, and positions have been assigned a value of

I have encountered a peculiar issue that I managed to recreate in a simplified version. In my scenario, the parent element has the CSS property position: relative, while the child element with the ::after pseudo-element has position: absolute and all direc ...

Styling two divs with borders

Hello everyone, I could really use some assistance with merging the borders of two <div>s. Here's what I'm trying to achieve compared to where I currently stand: view image here and this is my desired outcome view image here Would anyone b ...

jQuery Autocomplete without dropdown menu suggestion available

I'm working on a form for my webpage and I want to enhance user experience by adding autocomplete functionality. The goal is to suggest existing names as users type in the 'name' input text box. Although I can see in my console that it&apos ...

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: https://i.sstatic.net/aqIHk.png Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() =& ...

Node.js and Express.js fails to transmit files to clients

Attempting to send a gif to the client for future use in CSS, but encountering a 404 error in the console log. The gif is located within the public directory. Server: var app = require('express')(); var http = require('http').Server(a ...

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

I am new to jQuery and JavaScript. I have a textbox and a select box, and when I enter a value in the textbox and select a value from the select box, I want to display the multiplication of both values in another textbox. I have tried doing this with two t ...