How to use the ordered list in a table, in which each cell will define a list item. like
.
There's no way to define the column first. So I tried to make something like . (This is not what I need. I just tried something because I had no clue to do something like the first picture.)
With this Html code:
<table cellspacing="0" border="1">
<ol type="1">
<tr>
<th>Heading 1</th>
<td>
<li> data</li>
</td>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ol>
<ul type="square">
<tr>
<th>Heading 2</th>
<td>
<li> data</li>
</td>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ul>
<ol type="A">
<tr>
<th>Heading 3</th>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ol>
</table>
Now I'm confused, how can I use <li> of an ordered or unordered list in each cell to make it as a list view?
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to create following table.sample of table
My Code
<html>
<head>
<style>
td {
border: none;
}
</style>
</head>
<body bgColor="pink" link="red" text="black" link="blue" vlink="green" alink="blue">
<center>
<font color="red" size="6">
E-games
</font>
<br/>
</center>
<br clear="right" />
E-GAMES is a website offering new and friendly games for all games
<image align="right" src="games.jpg" width="100" height="100"/>
<br/>
<b> Games Offered </b>
<ol>
<li>
Individual Games
<ul type="square">
<li>
Spelling Bee
</li>
<li>
Zuma Deluxe
</li>
<li>
Mario
</li>
</ul>
</li>
<li>
Group Games
<ul type="circle">
<li>
Chess
</li>
<li>
Billiards
</li>
<li>
Snooker
</li>
</ul>
</li>
</ol>
<b>You can also buy CDs of following games through our site</b>
<center>
Price List
</center>
<table width="50%" align="center" border="2" bordercolor="blue" >
<th> Game Name </th>
<th> Price </th>
<tr>
<td>
Spelling Bea
</td>
<td>
Rs. 200
</td>
</tr>
<tr>
<td>
Billards
</td>
<td>
Rs. 300
</td>
</tr>
<tr>
<td>
Snooker
</td>
<td>
Rs. 400
</td>
</tr>
</table>
</p>
</body>
</html>
I tried to do this by nesting of tables in html. But it didn't work. Now I think this cannot be done without using css. You have to use CSS for this.
What have I tried
Nested table
Removing border from table cells
But so far I am unable to achieve the table shown in the sample image
It is just cell spacing
table {
border: 1px solid black;
border-spacing: 10px;
border-collapse: separate;
}
th, td {
border: 1px solid blue;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</tbody>
</table>
How to use the ordered list in a table, in which each cell will define a list item. like This picture.
There's to way to define the column first. So I tried to make something like this. (This is not what I need. I just tried something because I had no clue to do something like the first picture.)
With this Html code:
<table cellspacing="0" border="1">
<ol type="1">
<tr>
<th>Heading 1</th>
<td>
<li> data</li>
</td>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ol>
<ul type="square">
<tr>
<th>Heading 2</th>
<td>
<li> data</li>
</td>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ul>
<ol type="A">
<tr>
<th>Heading 3</th>
<td>
<li> data</li>
</td>
<td>
<li> data </li>
</td>
<td>
<li> data </li>
</td>
</tr>
</ol>
</table>
Now I'm confused, how can I use <li> of an ordered or unordered list in each cell to make it as a list view?
You can do either this, else nothing.
<table cellspacing="0" border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>
<ol type="1" start="1">
<li>
Data
</li>
</ol>
</td>
<td>
<ul type="square">
<li>
Data
</li>
</ul>
</td>
<td>
<ol type="A" start="1">
<li>
Data
</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol type="1" start="2">
<li>
Data
</li>
</ol>
</td>
<td>
<ul type="square">
<li>
Data
</li>
</ul>
</td>
<td>
<ol type="A" start="2">
<li>
Data
</li>
</ol>
</td>
</tr>
<tr>
<td>
<ol type="1" start="3">
<li>
Data
</li>
</ol>
</td>
<td>
<ul type="square">
<li>
Data
</li>
</ul>
</td>
<td>
<ol type="A" start="3">
<li>
Data
</li>
</ol>
</td>
</tr>
</table>
I created a nested table as per the section 3 challenge. But I don't get tables in the right alignment. Please see the picture I included below. The code I used is posted below too. Please feel free to check. Here you can see the second table is not starting exactly at the top.
The body part of HTML code is listed below. Please refer and point me where I made my mistake.
<body>
<table>
<tr>
<td> <img src="images/img11.png" alt="Master Oggway Quotes"></td>
<td>
<h1>No Name</h1>
<p>
<em>Embedded Engineer and </em>
<strong>a life long learner</strong>
</p>
<p>This is my website I will put some awesome electronics and computer science experiment I do here.</p>
</td>
</tr>
</table cellspacing="20">
<hr>
<h3>Techinical Background</h3>
<ul>
<li>Bachelor Degree in ECE</li>
<li>3 year experience in Embedded Engineering</li>
<li>C programmer, Python, web development, C++ </li>
<li>Linux shell scripting plus embedded linux programming</li>
</ul>
<hr>
<h3>WORK EXPERIENCE</h3>
<table>
<thead>
<tr>
<th>Date</th>
<th>Experience</th>
</tr>
<tbody>
<tr>
<td>2018-2019</td>
<td>SMEC LABS as Juniour Embedded Engineer</td>
</tr>
<tr>
<td>2019-PRESENT</td>
<td>QIS as Seniour Embedded Engineer</td>
</tr>
</tbody>
</thead>
</table>
<hr>
<h3>My Hobbies</h3>
<ol>
<li>Electronics DIY experimenting and Programming</li>
<li>Web development Youtuber and Blogging</li>
<li>GAME programming in Scratch and C++</li>
<li>Reading techinical articles and books</li>
<li>Dance, Swim and video games</li>
</ol>
<hr>
<h3>SKILLS</h3>
<table cellspacing="20">
<tr>
<td>
<table cellspacing="20">
<tr>
<td>Embedded C, C++</td>
<td> ✪✪✪✪✪</td>
</tr>
<tr>
<td>PCB Design using KiCAD</td>
<td> ✪✪✪✪✪</td>
</tr>
<tr>
<td>Web Designing and Python Programming</td>
<td> ✪✪✪✪</td>
</tr>
<tr>
<td>Embedded Linux and Linux System Programming</td>
<td> ✪✪✪</td>
</tr>
</table>
</td>
<td>
<table cellspacing="20">
<tr>
<td valign="top">Hardware debugging using DSO logic analyzer etc</td>
<td valign="top"> ✪✪✪✪✪</td>
</tr>
<tr>
<td valign="top">IoT and Networking</td>
<td valign="top"> ✪✪</td>
</tr>
</table>
</td>
</tr>
</table>
<h3>Hobbies Explained</h3>
<h3>CONTACT ME</h3>
</body>
You need to vertically align the contents of the td
<td valign="top">
<table> ...</table>
</td>
Demo
I have HTML code as below which intern has a hyper link
<div class="metro hotel_metro margbot3">
<a href='/directory/tour-operator/a1-bhutan-travel-services'>
<h5>
<img src='http://tcb.img.ebizity.bt/images/thumb/tcb-tour_092716_IMG_7812.JPG' />
A1 Bhutan Travel Services
</h5>
</a>
and the href has following html code
<h1 class="margbot3">
A1 Bhutan Travel Services
</h1>
<table cellpadding="4" cellspacing="0" class="table_listing margright1 margbot5 w_48">
<tr>
<td width="100px" align="center">
<img src='http://tcb.img.ebizity.bt/images/medium/tcb-tour_092716_IMG_7812.JPG' />
</td>
</tr>
</table>
<table cellpadding="4" cellspacing="0" class="table_listing margright1 margbot5 w_48">
<tr>
<td>
<b>Office Hours </b>
</td>
<td>
9:00 AM to 5:00 PM
</td>
</tr>
<tr>
<td>
<b>Year Established</b>
</td>
<td>
2016
</td>
</tr>
<tr>
<td>
<b>License Holder</b>
</td>
<td>
Pema Yangden
</td>
</tr>
<tr>
<td width="100px">
<b>Address </b>
</td>
<td>
Chubachu, Thim Throm, Thimphu
</td>
</tr>
<tr>
<td>
<b>Telp </b>
</td>
<td>
00975- 17672013
</td>
</tr>
<tr>
<td>
<b>Fax </b>
</td>
<td>
NA
</td>
</tr>
<tr id="_cph_content__rpt_info__tr_email_0">
<td>
<b>Email </b>
</td>
<td>
<a href='mailto:pema#travelbhutan.com '>pema#travelbhutan.com </a>
<ul class="list_submenu" style="display: none;">
<li style="list-style: none !important;"><a href="#top" id="pop">Contact
A1 Bhutan Travel Services
»</a> </li>
</ul>
</td>
</tr>
<tr>
<td>
<b>Website </b>
</td>
<td>
<a href='http://www.travelbhutan.com' target='_blank'>www.travelbhutan.com</a>
</td>
</tr>
<tr>
<td>
<b>Specialize In</b>
</td>
<td>
<ul>
<li>
Adventure
</li>
<li>
Art
</li>
<li>
Bird Watching
</li>
<li>
Cultural
</li>
<li>
Customized
</li>
<li>
Cycling
</li>
<li>
Festivals
</li>
<li>
High-End
</li>
<li>
Honeymoon
</li>
<li>
Photography
</li>
<li>
Pilgrimage
</li>
<li>
Spiritual/Wellness
</li>
<li>
Trekking
</li>
<li>
White Water Rafting
</li>
</ul>
</td>
</tr>
</table>
<div class="clear">
</div>
<p>
Arranging Bhutan tour for regional and Foreign tourist. </p>
</div>
</div>
</div>
I want to transform it to following XML format using XSLT
<document>
<name>A1 Bhutan Travel Services </name>
<Office Hours>9.00Am</Office Hours>
<Year Established>2015 </Year Established>
I am new to XSLT so could anyone help me with sample XSLT which would be required to transform the above HTML to XML.
I am attempting to align two separate tables in html. I want them centered with one on the left, one on the right and some space between the tables. Here is the code I currently have set up. I have them aligned, but one is left and one is right with lots of space between them. New to Html please would be appreciated!
<h1>
Retrofit</h1>
<p>
Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists. </p>
<div>
<table style="float:left">
</table>
<table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
Markets:<br />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Commercial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Financial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Global</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Government</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Healthcare</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Higher Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
K-12 Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Retail</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="float:right">
</table>
<table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
<p>
Brands:</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Arrow</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Best</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Corbin Russwin</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Dorma</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Falcon</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Kwikset</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Sargent</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Schlage</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Stanley</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Weiser</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Yale</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<p>
</p>
Basic nested table will do it.
<table width="600px" >
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of left side
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of right side
</td>
</tr>
</table>
</td>
</tr>
</table>
Check it here
Note: margin: 0 auto; makes your table at the center
Instead of using float left/right use inline-table as shown below:
table
{
display:inline-table;
}
This way you can have tables side by side.
If you change the value of "style="width: 150px" by one more high (200px or 250px), does it work ?
You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto;. Here is a jsbin example.
P.S.: Press edit in top-right corner to see the code. The good thing about using this float to the first table, with 2 seperate tables and with margin: 0 auto; to the parent div is that it is responsive. Try resizing the browser window and you will see how the tables seperate on smaller resolutions (good for a website that is designed to run on smartphones too)
They are misaligned because you have Markets:<br /> in first table and <p>Brands:</p> in second table. You need to be consistent with them.
You can use float:left; and margin-right on the first div to get the spacing.
JSBin sample (Seems like Fiddle is down)
See this DEMO
You can try on the second table :
<table style="float:left">
and replace on the second table :
align="right"
with
align="left"