I have a text string like this:
Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 . For What it’s
Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin . Fever
Emiliana Torrini . Me and Amini Cowboy Junkies . Run for your Life Mira
Billotte . As I Went out in the Morning Nitin Sawhney feat. Tina Grace
. October Daze Isobel Campbell . Saturday’s Gone Barbara . Mes
Hommes...
And I want to use the line break character in my string as parameters of my table. I want something like this :
Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .
For What it’s Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .
Fever Emiliana Torrini . Me and Amini Cowboy Junkies .
Run for your Life Mira Billotte . As I Went out in the Morning Nitin Sawhney feat.
Tina Grace . October Daze Isobel Campbell .
Saturday’s Gone Barbara . Mes Hommes...
It can be a (\n) or any other character. At the end of each line there is a line break character.
Someone have an idea?
Your question has an incorrect formulation. ( "...i want to use the line break characte..." than you've said "...It can be a (\n) or any other character. ..." )
You can use tag </br>
Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .</br> For What it’s
Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .</br> Fever
Emiliana Torrini . Me and Amini Cowboy Junkies .</br> Run for your Life Mira
Billotte . As I Went out in the Morning Nitin Sawhney feat.</br> Tina Grace
. October Daze Isobel Campbell .</br> Saturday’s Gone Barbara . Mes
Hommes...
Please explain your problem a little more. Is that string being placed inside one column? If so then why don't you make the column a specific width E.g:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<col width="330">
<col width="80">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 . For What it’s
Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin . Fever
Emiliana Torrini . Me and Amini Cowboy Junkies . Run for your Life Mira
Billotte . As I Went out in the Morning Nitin Sawhney feat. Tina Grace
. October Daze Isobel Campbell . Saturday’s Gone Barbara . Mes
Hommes...</td>
<td>This is under column 2</td>
</tr>
<tr>
<td>This is another long string. This is another long string. This is another long string. This is another long string. This is another long string. This is another long string. This is another long string. This is another long string. This is another long string. </td>
<td>Again this is under column 2... also a long string:Again this is under column 2... also a long string: Again this is under column 2... also a long string: Again this is under column 2... also a long string: </td>
</tr>
</table>
<p>The col width attribute is not supported in HTML5.</p>
</body>
</html>
Or do you want each one of those to be in separate columns/rows
I don't know if i should do the thing like this.
<table v-for="piste in details.text_tracks">
<tr>
<td>{{details.text_tracks}}</td>
</tr>
</table>
var details.text_tracks = "Jenny Lewis . Pretty Bird Sergio Mendes &
Brasil 66 .\n For What it’s Worth Petra Magoni feat. Jean-Jacques
Milteau & Manu Galvin .\n Fever Emiliana Torrini . Me and Amini Cowboy
Junkies .\n Run for your Life Mira Billotte . As I Went out in the
Morning Nitin Sawhney feat.\n Tina Grace . October Daze Isobel Campbell
.\n Saturday’s Gone Barbara . Mes Hommes...\n"
This is my full code. I want a table that create cell for each line.
Standalone code
var details = {};
details.text_tracks = "Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .\n For What it’s Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .\n Fever Emiliana Torrini . Me and Amini Cowboy Junkies .\n Run for your Life Mira Billotte . As I Went out in the Morning Nitin Sawhney feat.\n Tina Grace . October Daze Isobel Campbell .\n Saturday’s Gone Barbara . Mes Hommes...\n";
details.text_tracks = details.text_tracks.replace(/(?:\r\n|\r|\n)/g, '<br />');
document.getElementById("my-text").innerHTML = details.text_tracks;
<div id="my-text">
</div>
Modification in your code
You should replace \n with <br> Use the below code
var details.text_tracks = "Jenny Lewis . Pretty Bird Sergio Mendes &
Brasil 66 .\n For What it’s Worth Petra Magoni feat. Jean-Jacques
Milteau & Manu Galvin .\n Fever Emiliana Torrini . Me and Amini Cowboy
Junkies .\n Run for your Life Mira Billotte . As I Went out in the
Morning Nitin Sawhney feat.\n Tina Grace . October Daze Isobel Campbell
.\n Saturday’s Gone Barbara . Mes Hommes...\n"
details.text_tracks = details.text_tracks .replace(/(?:\r\n|\r|\n)/g, '<br />');
You can also do this in the server side code before sending it client.
I'm not sure what you are really asking for, but as far as I understand you would like your text string in one text area or text box.
You could form a text area using HTML by the following code,
<th colspan="3" rowspan="9" id="textarea">
<textarea id = "textInput" rows = "13" cols = "100">
</textarea>
</th>
Where colspan, rowspan, id, rows and cols can be defined by you.
And in javascript you can use,
textarea = document.getElementById('textInput');
textarea.value = 'Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .\n For What it’s Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .\n Fever......';
or...
textarea = document.getElementById('textInput');
textarea.value = 'Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .\n';
textarea.value = textarea.value + 'For What it’s Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .\n';
and repeat the textarea.value = textarea.value + 'blablabla \n';
Here you are... right now it calls the function on button click but that can easily be changed.
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {
var str = "Jenny Lewis . Pretty Bird Sergio Mendes & Brasil 66 .</br> For What it’s Worth Petra Magoni feat. Jean-Jacques Milteau & Manu Galvin .</br> Fever Emiliana Torrini . Me and Amini Cowboy Junkies .</br> Run for your Life Mira Billotte . As I Went out in the Morning Nitin Sawhney feat.</br> Tina Grace . October Daze Isobel Campbell .</br> Saturday’s Gone Barbara . Mes Hommes...;"
var res = str.split("</br>").join("</td></tr><tr><td>");
document.getElementById("demo").innerHTML += "<td>" + res + "</td></tr>";
}
</script>
<p>Click the button to display the array values after the split.</p>
<button onclick="myFunction()">Try it</button>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table id="demo">
<col width="130">
<tr>
<th>Column 1</th>
</tr>
</table>
</body>
</html>
Related
I've seen many examples using style='"white-space:pre-wrap; word-wrap:break-word"; for example, but I didn't see how to break the text into multiple lines breaking at specific words.
So, this Fiddle currently displays:
First Name/Appartment, No.137, Joseph South Road, Sec. 2, Fortaleza, Country Tel: +55-8-1234567 email#email.com; email2#email2.com
but it should look like:
First Name/Appartment, No.137,
Joseph South Road, Sec. 2, Fortaleza, Country
Tel: +55-8-1234567
email#email.com; email2#email2.com
Appreciate any help!
The line break element <br> works pretty good for this.
p {
display: inline-block;
}
<p>First Name/Appartment, No.137,<br>
Joseph South Road, Sec. 2, Fortaleza, Countr<br>
Tel: +55-8-123456<br>
email#email.com; email2#email2.com<br>
</p>
-webkit-user-modify: read-write-plaintext-only; will print the text the same way it is in the markup.
p {
-webkit-user-modify: read-write-plaintext-only;
}
<p>First Name/Appartment, No.137,
Joseph South Road, Sec. 2, Fortaleza, Countr
Tel: +55-8-123456
email#email.com; email2#email2.com
</p>
⚠️ user-modify is a deprecated feature
There's no way that white-space:pre-wrap; can wrap the line as you intended without any indications. Consider manually adding line breaks in your code and use white-space:pre-line; to preserve the breaks:
<table>
<tr>
<td class='address' style="white-space: pre-line;">First Name/Appartment, No.137,
Joseph South Road, Sec. 2, Fortaleza, Country
Tel: +55-8-1234567
email#email.com; email2#email2.com
</td>
</tr>
</table>
CSS Cares about document structure, not content, so you can't do what you want with just css.
You have a semantic structure to your html, use it. This way you can style each logical element as needed.
.name, .apptNum {display:inline-block;}
.name::after {content:'/';}
.apptNum::after {content: ',';}
.address, .tel, .email {display: block;}
<table>
<tr>
<td>
<span class="name">First Name</span>
<span class="apptNum">Appartment, No.137</span>
<span class="address">Joseph South Road, Sec. 2, Fortaleza, Country</span>
<span class="tel">Tel: +55-8-1234567</span>
<span class="email">email#email.com; email2#email2.com</span>
</td>
</tr>
</table>
I wish to scrape a table from a specific webpage. The issue is that some of the table's td contains a nested span tag containing another nested table.
The webpage that I want to scrape from is the following Click here .
I have included a small sample of the table that I want to scrape with the nested table contained within span tag with a class tooltip-icon. How can I exclude the contents inside these specific span tags when scraping the whole table
<tr style="font-size:12px;">
<td align="left">Abhanpur</td>
<td align="center">53</td>
<td align="left">
<table>
<tbody>
<tr>
<td>DHANENDRA SAHU</td>
<td style="vertical-align:top"><span class="tooltip-icon" style="display:block">i</span>
<div class="tooltip">
<h3>Assembly Election Result 2013</h3>
<table>
<tbody>
<tr>
<td>Party</td>
<td>:</td>
<td>Indian National Congress</td>
</tr>
<tr>
<td>Result</td>
<td>:</td>
<td>WON</td>
</tr>
<tr>
<td>Margin</td>
<td>:</td>
<td>8354</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left">
<table>
<tbody>
<tr>
<td>Indian National Congress</td>
<td style="vertical-align:top"><span class="tooltip-icon" style="display:block">i</span>
<div class="tooltip">
<h3>Current Assembly Election Result</h3>
<table>
<tbody>
<tr>
<td>Leading In</td>
<td>:</td>
<td>0</td>
</tr>
<tr>
<td>Won In</td>
<td>:</td>
<td>68</td>
</tr>
<tr>
<td>Trailing In</td>
<td>:</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left">CHANDRASHEKHAR SAHU - CHAMPU BHAIYYA</td>
<td align="left">
<table>
<tbody>
<tr>
<td>Bharatiya Janata Party</td>
<td style="vertical-align:top"><span class="tooltip-icon" style="display:block">i</span>
<div class="tooltip">
<h3>Current Assembly Election Result</h3>
<table>
<tbody>
<tr>
<td>Leading In</td>
<td>:</td>
<td>0</td>
</tr>
<tr>
<td>Won In</td>
<td>:</td>
<td>15</td>
</tr>
<tr>
<td>Trailing In</td>
<td>:</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">23471 </td>
<td align="center">Result Declared</td>
<td align="center" style="background-color: lightgray;">DHANENDRA SAHU</td>
<td align="center" style="background-color: lightgray;">Indian National Congress</td>
<td align="center" style="background-color: lightgray;">8354</td>
I am also including the full python script I currently use to scrape the table. I have successfully scrape the whole table but unable to exclude the nested span and table content.
full scraper code here
The Out put that I am currently getting in a csv format is as follows (Just the sample row out of the whole set). In the 3rd column the span tag also gets scraped as indicated by "iAssembly Election Result"
Abhanpur,53,DHANENDRA SAHUiAssembly Election Result 2013Party:Indian National CongressResult:WONMargin:8354,DHANENDRA SAHU,iAssembly Election Result 2013Party:Indian National CongressResult:WONMargin:8354,Party,:,Indian National Congress,Result,:,WON,Margin,:,8354,Indian National CongressiCurrent Assembly Election ResultLeading In:0Won In:68Trailing In:0,Indian National Congress,iCurrent Assembly Election ResultLeading In:0Won In:68Trailing In:0,Leading In,:,0,Won In,:,68,Trailing In,:,0,CHANDRASHEKHAR SAHU - CHAMPU BHAIYYA,Bharatiya Janata PartyiCurrent Assembly Election ResultLeading In:0Won In:15Trailing In:0,Bharatiya Janata Party,iCurrent Assembly Election ResultLeading In:0Won In:15Trailing In:0,Leading In,:,0,Won In,:,15,Trailing In,:,0,23471 ,Result Declared,DHANENDRA SAHU,Indian National Congress,8354,
The expected out put is to scrape the table excluding the span tags and its nested tables. for example
Abhanpur, 53 , DHANENDRA SAHU, Indian National Congress, CHANDRASHEKHAR SAHU - CHAMPU BHAIYYA, Bharatiya Janata Party , 23471, Result Declared
Any help on this would be very helpful. thanks.
This is just my preference, but whenever I see <table> tags, I utilise Pandas to do the parsing, then just manipulate the dataframe as needed. It also allows you to write to file in one line:
import pandas as pd
results_df = pd.DataFrame()
url_list = [1,2,3,4,5,6,7,8]
url = 'http://eciresults.nic.in/Statewises26.htm'
dfs = pd.read_html(url)
df = dfs[0]
idx = df[df[0] == '1\xa02\xa03\xa04\xa05\xa06\xa07\xa08\xa09\xa0Next >>'].index[0]
cols = list(df.iloc[idx-1,:])
df.columns = cols
df = df[df['Const. No.'].notnull()]
df = df.loc[df['Const. No.'].str.isdigit()].reset_index(drop=True)
df = df.dropna(axis=1,how='all')
df['Leading Candidate'] = df['Leading Candidate'].str.split('i',expand=True)[0]
df['Leading Party'] = df['Leading Party'].str.split('iCurrent',expand=True)[0]
df['Trailing Party'] = df['Trailing Party'].str.split('iCurrent',expand=True)[0]
df['Trailing Candidate'] = df['Trailing Candidate'].str.split('iAssembly',expand=True)[0]
results_df = results_df.append(df)
for x in url_list:
url = 'http://eciresults.nic.in/Statewises26%s.htm' %x
print ('Processed %s' %url)
dfs = pd.read_html(url)
df = dfs[0]
df.columns = cols
df = df[df['Const. No.'].notnull()]
df = df.loc[df['Const. No.'].str.isdigit()].reset_index(drop=True)
df = df.dropna(axis=1,how='all')
df['Leading Candidate'] = df['Leading Candidate'].str.split('i',expand=True)[0]
df['Leading Party'] = df['Leading Party'].str.split('iCurrent',expand=True)[0]
df['Trailing Party'] = df['Trailing Party'].str.split('iCurrent',expand=True)[0]
df['Trailing Candidate'] = df['Trailing Candidate'].str.split('iAssembly',expand=True)[0]
results_df = results_df.append(df).reset_index(drop=True)
results_df.to_csv('Chhattisgarh_cand.csv', index=False)
Output:
print (df.to_string())
Constituency Const. No. Leading Candidate Leading Party Trailing Candidate Trailing Party Margin Status Winning Candidate Winning Party Margin
0 Abhanpur 53 DHANENDRA SAHU Indian National Congress CHANDRASHEKHAR SAHU - CHAMPU BHAIYYA Bharatiya Janata Party 23471 Result Declared DHANENDRA SAHU Indian National Congress 8354
1 Ahiwara 67 GURU RUDRA KUMAR Indian National Congress RAJMAHANT SANWLA RAM DAHRE Bharatiya Janata Party 31687 Result Declared RAJMAHNT SANWLA RAM DAHRE Bharatiya Janata Party 31676
2 Akaltara 33 SAURABH SINGH Bharatiya Janata Party RICHA JOGI Bahujan Samaj Party 1854 Result Declared CHUNNILAL SAHU Indian National Congress 21693
3 Ambikapur 10 T.S. BABA Indian National Congress ANURAG SINGH DEO Bharatiya Janata Party 39624 Result Declared T.S.BABA Indian National Congress 19558
4 Antagarh 79 ANOOP NAG Indian National Congress VIKRAM USENDI Bharatiya Janata Party 13414 Result Declared VIKRAM USENDI Bharatiya Janata Party 5171
5 Arang 52 DR. SHIVKUMAR DAHARIYA Indian National Congress SANJAY DHIDHI Bharatiya Janata Party 25077 Result Declared NAVEEN MARKANDEY Bharatiya Janata Party 13774
6 Baikunthpur 3 AMBICA SINGH DEO Indian National Congress BHAIYALAL RAJWADE Bharatiya Janata Party 5339 Result Declared BHAIYALAL RAJWADE Bharatiya Janata Party 1069
7 Balodabazar 45 PRAMOD KUMAR SHARMA Janta Congress Chhattisgarh (J) JANAK RAM VERMA Indian National Congress 2129 Result Declared JANAK RAM VERMA Indian National Congress 9977
8 Basna 40 DEVENDRA BAHADUR SINGH Indian National Congress SAMPAT AGRAWAL Independent 17508 Result Declared RUPKUMARI CHOUDHARY Bharatiya Janata Party 6239
9 Bastar 85 BAGHEL LAKHESHWAR Indian National Congress DR. SUBHAU KASHYAP Bharatiya Janata Party 33471 Result Declared BAGHEL LAKHESHWAR Indian National Congress 19168
You can do it with pandas, using this:
import pandas as pd
page = pd.read_html('http://eciresults.nic.in/Statewises26.htm')
my_table = page[5]
That gets you a pandas dataframe containing the table you're interested in, I believe. If you try:
my_table.iloc[[7]]
The output is:
7 Abhanpur 53 DHANENDRA SAHUiAssembly Election Result 2013Pa... Indian National CongressiCurrent Assembly Elec... CHANDRASHEKHAR SAHU - CHAMPU BHAIYYA Bharatiya Janata PartyiCurrent Assembly Electi... 23471 Result Declared DHANENDRA SAHU Indian National Congress 8354 NaN NaN
If that's what you are after, you can clean up your table using standard pandas methods.
This data are show in the web browser but not in the mobile app
i already check the internet connection in mobile but cant't get it any answer
This is my code
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com//website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
</body>
</html>
But my mobile is show me this output ->
{{ x.Name + ', ' + x.Country }}
but my web browser show me the correct answer
Alfreds Futterkiste, Germany
Berglunds snabbköp, Sweden
Centro comercial Moctezuma, Mexico
Ernst Handel, Austria
FISSA Fabrica Inter. Salchichas S.A., Spain
Galería del gastrónomo, Spain
Island Trading, UK
Königlich Essen, Germany
Laughing Bacchus Wine Cellars, Canada
Magazzini Alimentari Riuniti, Italy
North/South, UK
Paris spécialités, France
Rattlesnake Canyon Grocery, USA
Simons bistro, Denmark
The Big Cheese, USA
Vaffeljernet, Denmark
Wolski Zajazd, Poland
In this case what can i do for mobile app
So, I have been working on my own on something for a week now and am getting nowhere. I am taking a very advance CIS class that I have done well in so far but towards the end I am working with stuff that I haven't learned yet. I should have waited a couple of semesters to talk this class because I am unprepared for what I am doing now. My main problem is not knowing HTML (I haven't ever had a reason to learn it).
Any ways I have a nawk script template that I have figured out that I need to use. It is derived from a color generator script and is the following:
#!/bin/nawk -f
#-----------------------------------------------------------------------------
#YOUR COMMENTS HERE
#-----------------------------------------------------------------------------
BEGIN {
print "<html>"
print "<body>"
print " <table border=2>"
print " <tr>"
print " <th>$first $last</th>" ###Change this
print " <th>$username</th>" ###Change this
print " <th>Color</th>" ###Change this
print " </tr>"
}
{
print " <tr>"
print " <td>" $1 "</td>" ###Change this
print " <td>" $2 "</td>" ###Change this
print " <td>" $3 "</td>" ###Change this
print " </tr>"
}
END {
print "</table>"
print "</body>"
print "</html>"
}
As you can see on the 12th and 13th line I have added $first $last, and $username respectively. Am I doing this right. Because I don't know HTML, every time I look at it, it is confusing the !##$ out of me.
The following is supposed to be the output:
<html>
<body>
<table border=2>
<tr><th>Name</th><th>Username</th><th>Email</th></tr>
<tr>
<td>Michael Raby</td>
<td>mraby</td>
<td>mike1071#yahoo.com</td>
</tr>
<tr>
<td>Hajar Alaoui</td>
<td>halaoui</td>
<td>hajar6#hotmail.com</td>
</tr>
<tr>
<td>Anne Lemar</td>
<td>alemar</td>
<td>anne.lemar#asu.edu</td>
</tr>
<tr>
<td>Russell Crotts</td>
<td>rcrotts</td>
<td>Russell.Crotts#asu.edu</td>
</tr>
<tr>
<td>Dan Mazzola</td>
<td>dmazzola</td>
<td>dan.mazzola#sun.com</td>
</tr>
<tr>
<td>Bill Boyton</td>
<td>bboyton</td>
<td>boytonb#earthlink.net</td>
</tr>
</table>
</body>
</html>
The following is a sample of what the HTML table is supposed to look like:
Raby Michael mike1071#yahoo.com
Alaoui Hajar hajar6#hotmail.com
Lemar Anne anne.lemar#asu.edu
Crotts Russell Russell.Crotts#asu.edu
Mazzola Dan dan.mazzola#sun.com
Boyton Bill boytonb#earthlink.net
Can someone PLEASE help me? I've been trying to figure out this on my own for a week now.
It looks like the following will do what you want:
#!/bin/nawk -f
#-----------------------------------------------------------------------------
#YOUR COMMENTS HERE
#-----------------------------------------------------------------------------
BEGIN {
print "<html>"
print "<body>"
print " <table border=2>"
print " <tr>"
print " <th>Name</th>" ###Change this
print " <th>Username</th>" ###Change this
print " <th>Email</th>" ###Change this
print " </tr>"
}
{
print " <tr>"
print " <td>" $1 "</td>" ###Change this
print " <td>" $2 "</td>" ###Change this
print " <td>" $3 "</td>" ###Change this
print " </tr>"
}
END {
print "</table>"
print "</body>"
print "</html>"
}
I have this code which currently displays the information like this:
<?php
mysql_connect("localhost","example","password") or die("Could not connect to localhost");
mysql_select_db("exampledb") or die( "Could not connect to database");
$result = mysql_query("SELECT * FROM tablexample");
echo "<b>" . "Name" . "</b>" . " " . "<b>" . "Number" . "</b>";
echo "<br/>";
echo "<br/>";
while ($row = mysql_fetch_array($result))
{
echo ucwords($row['name']) . " " . ucwords($row['number']) . "<br>";
echo "<hr width='20%'>";
}
?>
Name Number
B (888) 888-3545
C (098) 545-4354
Cl (888) 888-3545
Da (888) 888-3545
H (888) 888-3545
H (888) 888-3545
Khzdf (888) 888-3545
BUT I want them to align like this (it should override how many letters each name has and have the same space:
Name Number
B (888) 888-3545
C (098) 545-4354
Cl (888) 888-3545
Da (888) 888-3545
H (888) 888-3545
H (888) 888-3545
Khzdf (888) 888-3545
-- Would this be done in CSS or PHP?
Have you considered using a table? Tables are great .... for displaying structured data
<table>
<thead>
<tr>
<th>Column1</th>
<th>column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column1 data</td><td>column 2 data</td>
</tr>
</tbody>
</table>
The quickest way to solve the problem would be this.
In your code you can change this:
echo ucwords($row['name']) . " " . ucwords($row['number']) . "<br>";
to this:
echo "<span style='display:inline-block; width:200px; text-align:left;'>" . ucwords($row['name']) . "</span><span style='display:inline-block; text-align:left;'>" . ucwords($row['number']) . "</span><br>";
Note: change 200px as needed.
Would this be done in CSS or PHP?
Neither! HTML <table> is what you are looking for.. they are also semantic adequate.