CODEWITHSUNDEEP
iphoneandroidmobilejqtouch
jgg
jgg

Reputation: 1136

How to create table/data grid for mobile devices using HTML/CSS/JavaScript

I want to show a table/data grid as shown below, this is for mobile devices like iPhone and Andriod phones. Are there any examples for this? (using plain HTML/CSS/JavaScript)

enter image description here

Upvotes: 0

Views: 1718

Answers (3)

William Niu
William Niu

Reputation: 15853

I had to do something like this when developing using jQTouch. I simply created an Edge-to-edge list with one item, and place a table inside it:

<ul class="edgetoedge">
    <li>
        <table sytle="width:100%; text-align: center; padding: 5px">
            <tr><td>Row 1-1</td><td>Row 1-2</td><td>Row 1-3</td></tr>
            <tr><td>Row 2-1</td><td>Row 2-2</td><td>Row 2-3</td></tr>
        </table>
    </li>
</ul>

Then style the table (i.e. <table>, <tr>, and <td>) to your heart's content.

Upvotes: 0

Gurpartap Singh
Gurpartap Singh

Reputation: 2764

If you have the HTML, CSS, etc. ready and working, you can use UIWebView class on iOS/iPhone to view your HTML file.

NSString *htmlString = @"<html>.......</html>";
NSURL *baseURL = [NSURL URLWithString:@""];

[myWebView loadHTMLString:htmlString baseURL:baseURL];

Upvotes: 1

Priyank
Priyank

Reputation: 10623

Basic example: Display HTML Table in webview

Upvotes: 0

Related Questions