<tr>
<td colspan="2" style="tex-align:center">
<button onclick="myFunction()">Enquire</button>
<script>
function myFunction() {
alert("Thank you, your enquiry has been submitted!");
}
</script>
</td>
</tr>
My enquire button will not move from the left of the page. I had a previous button that had no function and used a different code to make a popup box happen. It works, but the previous style and colspan codes have no effect on the new code.
The word text has two ts in it.
style="text-align:center"
There is just a spelling mistake in your code:
you gave
tex-align:center;
Its..
text-align:center;
Do:
style="text-align:center"
and add some CSS to the HTML table:
table{
width: 100%;
}
Working Demo
Related
The items in my table are not center. I'm still a beginner and know that it is bad practice to use tables these days but I feel I should start from the beginning. I have 2 items that I would like to center in the middle of the screen in the same row. Currently, the images are to the left.
<table>
<tr align="center">
<td>
<a href="http://sourceforge.net/">
<img src="Resource/download.png">
</a>
</td>
<td>
<a href="http://sourceforge.net/">
<img src="Resource/info.png">
</a>
</td>
</tr>
</table>
Just going to post this as a seperate answer, because of how horrible the convention to use attributes for styling is. Don't ever use attributes for styling. See the MDN attributes list. See all those thumbs down next to the attribute name? They mean: 'Don't use this attribute'. It does still work, but it's just horrible. Like using deprecated tags like center, using deprecated attributes is just really bad habit. The MDN article mentions how to achieve the same thing as what you'd do with the attribute, but without the deprecated HTML.
In this situation, use:
<table style="width:100%;border:1px solid black;">
and:
<tr style="text-align:center;">
The final fiddle would be this.
Jatin gave you a solution, but he didn't explain it. Your align attribute is set properly and it's working, but the table is only as wide as its contents. The text is centered within the table as you intended, but the table itself isn't centered. Since the table is left-justified by default, it looks like it's not centered.
Especially as a beginner, you should try to do things the right way. It'll be much easier for you later if you adopt good practices early. A table is the wrong thing for what you're trying to do.
An important habit to get into is to put only your content, like text and pictures, into the HTML and put all the code that controls how it looks into CSS. Although the align property is valid (in HTML 4), it means you're putting something that controls the appearance into the HTML. The same goes for the border and width properties.
This is how you should control the appearance of a table:
HTML
<table>
<tr>
<td>
<img src="Resource/download.png">
</td>
<td>
<img src="Resource/info.png">
</td>
</tr>
</table>
CSS
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
text-align: center;
}
A better way might be like this:
HTML
Google
Yahoo
CSS
a {
display: block;
width: 50%;
float: left;
text-align: center;
}
If you wanted to center more than just a couple of links, you may want to put it into a block or a paragraph.
I put something up on CodePen that shows a few examples of how to accomplish this: http://codepen.io/Ghodmode/pen/iaEvh
Working Fiddle
Small Change:
<table width="100%" border="1">
Is it good solution to put table inside a tag ? Why link doesn't work when it wraps table ?
<a href="/place">
<table>
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
</a>
I need to implement the next html
No, you don't, and shouldn't. Really. It's invalid, non-semantic, and (perhaps most importantly) won't work reliably because of those reasons.
If all you want is an image and some text (which is linked), use something like:
My Place Name
.button {
display: inline-block;
background-image: url();
background-position: 2px 2px;
padding-left: 16px; /* size of image */
}
Here's a working example: http://jsfiddle.net/RvTp3/
Per comments, here is another example showing an image aligned to the vertical middle when the text wraps: http://jsfiddle.net/RvTp3/1/
it seems to me, that you just want to have a link with icon and text, both linking to /place and that you use <table> just for the layout, right? Why not get rid off the table and do the layout using css?
It's not. You shouldn't.
if you want to enable click on table. then you can just do it by attaching click event to table.
<table onclick="window.location='yoururl'">
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
I recently applied a hover feature to a set of buttons. When applied to a different website the coding was fine. When applied to this site the link/hotspot goes to the next button. For example: I have buttons home/about/gallery/blog/prints/contact and you would think with the dimensions set in CSS style sheet that the link would only apply to those dimensions. Not with this one. The link/hotspot shows linked to index.shtml from the edge of the table to the other side of the home button. There are spaces between buttons but the link/hotspot goes 50%across the space until it hits the next buttons link/hotspot. And the final button "contact" spans across to the opposite edge of the table. Any clues as to what I am doing wrong?
CSS:
div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}
Index.shtml:
<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->
menubuttons.html:
<tr>
<td align="center" width="75">
</div>
</td>
<td align="center" width="86">
</div>
</td>
<td align="center" width="94">
<a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>
<td align="center" width="63">
</div>
</td>
<td align="center" width="85">
<a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints">
</div></a>
</td>
<td align="center" width="103">
<a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>
</tr>
FIXED: (maybe not properly?)
I have only been coding for 2 months and have a pretty good idea on how to write it out, but I don't know what everything means such as the DIV tag. I know I was searching on here last night and I assumed I was to put the div inside a TD.
I was able to fix everything by simply adding a few spacer.png's before the first button in between each set of buttons and after the last button. This also fixed my spacing issues on the sides.
Thanks for the help. I simply am trying to find an easy way to make my buttons change on hover. This method was the first I found last night on here and am now trying to perfect it.. well in my head at least. I need to research on the unordered list a little because I have heard that that makes things more simple...
Here is the link(based off the back end of a site I recently finished) www.blackmarkettattoos.com/amysesco/index.shtml
I think the problem is the fact that you are using DIV, which is a container tag inside table's cell, and for both you apply style (to the DIV as class and to the TD as inline).
Generally, it is better to create menus with lists, but if you must use the code you provided, then try to remove width: 75px; from the div.nav-home.
Check these two links for how to create CSS menus with lists:
css.maxdesign.com.au
Dynamic Drive CSS Library
I am trying to place a hyperlink vertically so it's to the middle of the height of a textbox but it's not working for me.
Here's the jsfiddle example. I want to do this without using Javascript, works in IE6+, the two elements need to be in the same td column, without using hard coded pixels, and the hyperlink to be right next to the right edge of the textbox (like it's shown in the example, just move it upward to the middle of the yellow box).
As long are the textarea and a elements are inline elements, they will share their base line. If you float the elements, you can set the line height of the a element to match the height of the textarea:
textarea { float :left; }
a { float: left; line-height: 6em; }
Demo: http://jsfiddle.net/Guffa/aLtXA/6/
Well, if you are willing to nest tables, this will work:
<table>
<tr style="vertical-align:top">
<td>
<table>
<tr style="width: 500px;">
<td>
<textarea cols="45" rows="5"></textarea>
</td>
<td style="background-color:yellow; vertical-align:middle">
Edit
</td>
</tr>
</table>
</td>
<td>
second cell
</td>
</tr>
</table>
but I hate this level of nested hell. It leads to madness and grey hair.
I hope someone will post a nicer answer.
Is it possible perhaps with the twitter bootstrap?
Here you go: http://jsfiddle.net/aLtXA/16/
I put vertical-align:middle on the TEXTBOX and anchor. As well, I removed the vertical-align from the table cell.
This question already has answers here:
how to make a whole row in a table clickable as a link?
(28 answers)
Closed 2 years ago.
I know it is possible to link an entire table cell with CSS.
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
<tr>
<td>example</td>
<td>another cell</td>
<td>one more</td>
</tr>
and
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
demo
The ::before is highlighted in red in the demo so you can see what it's doing.
Unfortunately, no. Not with HTML and CSS. You need an a element to make a link, and you can't wrap an entire table row in one.
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
Example: http://xxjjnn.com/linktablerow.html
Link entire row:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
<table>
<% #fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(#sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
with #fishies and #sea are defined in app/controllers/seas_controller.rb
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
.tableClass td a{
display: block;
}
and then add a link per cell:
<table class="tableClass">
<tr>
<td>Link name</td>
<td>Link description</td>
<td>Link somthing else</td>
</tr>
</table>
boring but clean.
To link the entire row, you need to define onclick function on your row, which is <tr>element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web:
In table:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
tr:hover {
cursor: pointer;
}
I think this might be the simplest solution:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when
the mouse pointer is over an element.
The inline css defines that for that element the cursor will be formatted as a pointer, so you don't need the 'hover'.