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>
Related
I can't figure out, how do I create a table header style similar to the one in the image? Also, how can I make the name and picture area into a block and add those two borders?
Oh, and how come my icons for my list turned out to be chinese characters, I copied the code for the sideways triangle, but it came out as that. And the codes weren't working for the phone/email either so I ended up using a picture of them instead. HTML code is below:
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
<table style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th Street,</br>17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,</br>United States.</td>
</tr>
<tr>
<td style="padding: 3px"><img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
</br>
</br>
<p><img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<span style="font-size: 25px"><b>RACHEL GARNER</b></span>
</br><span style="color: orange">MARKETING MANAGER</span></br>
</br>
</br>
</br><span style="color: blue">www.google.com</span></p>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b></td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint. Excellent problem solving and communication skills. Accustomed to long work
hours. Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b></td>
<td>To obtain an executive sales/marketing management position within a growth oriented, progressive company. I want to apply my business development/sales skills to an environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and decision making is required.</td>
</table>
</br>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span></td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b></td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span></td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td>
<ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul>
</td>
</tr>
</table>
Without the example image of how the headers are required to look it is impossible to answer the first part of the question.
This is however distinct from the second part about icons. You appear to be using the HTML code for the icons in the content of the arrow pseudo element for example this gives you a completely different character. You need to use the Unicode values. See e.g. Wikipedia
For a right arrow try this:
content: '\25b6'
Note that browsers render these types of character in their own ways.
How to make individual cells in a table a hyperlink in html?
This is how I tried to make it and it did not work:
<table>
<tr>
<td id="Home">Home
</td>
<td id="Locations">Locations
</td>
<td id="Accomodation">Accomodation
</td>
<td id="Transport">Transport
</td>
<td id="Contact">Contact Us
</td>
</tr>
</table>
The problem is not the table, it's that there is no content in the <a> tag, so, there's nowhere to click to trigger the link. Try this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
The reason it didn't work because you didn't write home inside the tag.
To make any text hyperlink, you have to put that text inside the tag.
In your case, you can make hyperlinks easily by putting Home, Location etc inside the the a tag like this:
<table>
<tr>
<td id="Home">
Home
</td>
<td id="Locations">
Locations
</td>
<td id="Accomodation">
Accomodation
</td>
<td id="Transport">
Transport
</td>
<td id="Contact">
Contact Us
</td>
</tr>
</table>
I think the problem here is that your tags actually does not show anything, so have 0px width tags. you can put test inside the tags, which will work. Example:
Home
I've tried to look at a few web pages but none of them seem to be addressing the specific issue I'm having. I'm trying to make a web page and I'm trying to make a table aligned to the left side of the web page with while the rest in center aligned. However the items ligned in the center are pushed over to the right where the left aligned table is. How can I align something in the center without it being interefered with something aligned on the left side of the page?
Here is my code.
`<!doctype html>
<title> Webpage.</title>
<body>
<body background="Data/Back.jpg">
<table style="float: left" bgcolor="#9999FF" border="solid">
<tr>
<th><ul><h1>Directory.</h1></ul></th></tr>
<br>
<tr><td><li><a href="subpages/skills.html">Skills.</li></td></tr>
<tr><td><li><a href="subpages/experience.html">Experience.</li></td>
</tr>
<tr><td><li><a href="subpages/References">References.</li></td></tr>
<tr><td><li><a href="subpages/ContactInfo.html">Contact Info.</li>
</td></tr>
<tr><td><li><a href="subpages/Resume.html">Resume.</li></td></tr>
</table>
<center>
<table bgcolor="CCCCCC" border="3px solid black">
<tr>
<th><h1><b><u>Name/Header.</u></b></h1></th>
</tr>
</table>
<img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" width="50%" border="solid">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject
</td>
</tr>
</center>
<style type="text/css">
h1{
color: #0404B4
}
th{
color: #61380B
}
td{
color: #8A0829
}
</style>
</body>`
Simply remove float: left from the first table. Floating an element means that other elements will attempt to occupy any remaining width when that element is less than 100% of the width of the parent. Alternatively, clear the floats afterwards with clear: both.
Here's an example, cleanly formatted, and removing float: left.
h1 {
color: #0404B4;
}
th {
color: #61380B;
}
td {
color: #8A0829;
}
<body>
<table bgcolor="#9999FF" border="solid">
<tr>
<th>
<div style="margin-left: 2em">
<h1>Directory.</h1>
</div>
</th>
</tr>
<tr>
<td>
<ul>
<li>
Skills.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Experience.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
References.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Contact Info.
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Resume.
</li>
</ul>
</td>
</tr>
</table>
<center>
<table bgcolor="#CCCCCC" border="3px solid black">
<tr>
<th>
<h1><b><u>Name/Header.</u></b></h1>
</th>
</tr>
</table><img src="Data/Me.jpg" width="25%">
<table bgcolor="#819FF7" border="solid" width="50%">
<tr>
<th>About me.</th>
</tr>
<tr>
<td>Subject</td>
</tr>
</table>
</center>
</body>
Hope this helps! :)
My question is that how can I use multiple link in one cell?
My html view is this and I want to have link on home, products and contact us.
My homework is design a website with table:
My code is :
<!doctype html>
<html>
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th, td {
padding: 10px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" > home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
</table>
</body>
</html>
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th, td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left" >
<td colspan="3" >
home
products
contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
</table>
Just add links to your text, for example change:
contact us
to
contact us
Like this maybe:
home products contact us
home
products
contact us
Use the above code to replace the below one
<td colspan="3" > home products contact us
Just add anchor tags and below css
home
products
contact us
Css:
a {
text-decoration:none;
}
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"