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
Related
I'm working with a html table that's generated dynamically and trying to place an icon/image in a column on the left side that spans the length of multiple table rows. In my example, I would like to place a single image in the colored shaded areas. This needs to be done using html & css. I'll be using the same icon in each block:
Here's a sample of the table structure:
<table border="0">
<tbody>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
Here's my icon div that needs to go in the shaded areas:
<div class="icon"><i class="far fa-newspaper"></i></div>
Obviously, this ain't gonna work:
<table border="0">
<tbody>
<div class="icon"><i class="far fa-newspaper"></i>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
</div>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
td {
width: 100px;
background: green;
}
<table>
<tr>
<td rowspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
You could use rowspan from table to span multiple rows.
I have been working a lot on 2 columns inside of a table with the foundation framework. I cannot understand why column 2 is going down under column 1, when I resize my window to under 600px? I would like that the columns are staying beside each other, when the window is resized. I have set the column to fill 6 each, so the second column should not jump down?
Does anybody knows how I can solve this? The code is for email newsletter, that is why I am using tables.
I have a JSfiddle with the CSS code aswell: jsfiddle
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 1</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 2</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A big text to test if the text is responsive.
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Above first wrapper class there is a tag.So write style inside tr tag like
As of this writing, there is still use of the nested table layout for most email clients. The answer for this is simple: Not all clients are up to speed, not all computers are up to speed.
Using tables in html emails is the most practiced and best method for overall deployment regardless of your email client. Foundation is nice, yes - but it is not the email industry standard as of yet.
Take a look at this handy tutorial from Mailchimp. I just wanted to clarify that you are not wrong for doing it this way, and you will be better off learning responsive email coding from the aforementioned tutorials first.
All that being said - what you've done in your jsfiddle is actually correct. But if you do NOT want them to collapse, simply remove the #media query strings.
Add "float: left" to the second wrapper of column2
When I use <table> with <tr> and <td> I always get NxN tables and not what I want.
For example:
<table border = "1">
<tr> <td> Do you love peanuts? This is a very important question. </td> </tr>
<tr> <td> Yes, I do. </td> <td> No, I don't. </td> </tr>
</table>
And yet, it looks like a 2x2 as one there is a blank square created over the page.
An example is here.
How can I make the first row (with the one element) spread the same as the one with two elements. I'm not talking about minimizing number of lines (in the text) or whatever, I mean just stretching it up to there.
You can solve this using the attribute colspan on the td tag:
<table border = "1">
<tr>
<td colspan="2">
Do you love peanuts? This is a very important question.
</td>
</tr>
<tr>
<td>
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
Check this link
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">Do you love peanuts? This is a very important question.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I want to know how do you skip a tag in HTML5.0. I mean literally, without CSS. Instead of an empty box, I want it to be filled in, not just blank. Any help would be appreciated
You can use colspan or rowspan.
<table>
<tr>
<td colspan="2">
Header
</td>
</tr>
<tr>
<td>
Text
</td>
<td>
Text
</td>
</tr>
<tr>
<td>
Text
</td>
<td>
Text
</td>
</tr>
</table>
I don't have much experience with html, but I tried to make a simple table and I get extra cells in it, I don't know why.
Here is the code:
<table border="1">
<tr>
<td colspan="5"> hi <td>
<td colspan="3"> hi <td>
</tr>
<tr>
<td colspan="3"> hi <td>
<td colspan="5"> hi <td>
</tr>
</table>
I expect this to have two rows with 2 cells in each, in first row first cell is bigger, and in second row second cell is bigger. But for some reason I get 4 cells in each row, like this:
.
You didn't terminate your <td>.... You need a </td> at the end.
Working Fiddle
http://jsfiddle.net/GFdP6/3/
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Furthermore
If you want it to look like you'd expect, you will have to set some widths on your td's like I did in the fiddle.
You have used TD Start Tags when you want TD End Tags. So you have 4 TD elements in each row instead of 2. (Note that the end tag for TD is optional so this is valid).
It's a typo... The closing TD tags are missing.
<table border="1">
<tr>
<td colspan="5"> hi --> close your tags here --> </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Missing closing tags for <td>.
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>