Remove part of a table border.

liunx

Guest
Since tables need to Download <!--more--> before they can be displayed. I am wanting to break up a longer table into two shorter ones. Since I do not know html code, I basically need to stay with what I can do. <br />
<br />
I want to remove the bottom border of the top table and the top boarder of the bottom table, so that you do not see the two middle boarders. Likely simple for those who know html. <br />
<br />
<HTML><HEAD></HEAD><br />
<BODY><br />
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#e1eef7 border=8><br />
<TBODY><br />
<TR><br />
<TD><br />
<DIV>&nbsp;</DIV><br />
<DIV>&nbsp;</DIV><br />
</TD></TR></TBODY></TABLE><br />
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#e1eef7 border=8><br />
<TBODY><br />
<TR><br />
<TD><br />
<DIV>&nbsp;</DIV><br />
<DIV>&nbsp;</DIV><br />
</TD></TR></TBODY></TABLE></BODY></HTML><br />
<br />
How to remove the two boarders in the middle and still have 2 tables?<br />
<br />
Thanks in advance.<!--content-->Ewwww. I don't think that can be done.<br />
<br />
By the way, bgColor=#e1eef7 should be "quoted" as in: bgColor="#e1eef7"<!--content-->This can be done fairly easily using CSS(cascading stylesheets). Here is what you do:<br />
<br />
The first thing you need to do is add this inside the <head> and </head> tags, these define the border properties that you are going to use for both of your tables:<br />
<br />
<style type="text/css"><br />
<br />
.table1 { border-top-width: 2px; border-bottom-width: 0px; border-left-width: 1px; border-right-width: 1px }<br />
<br />
.table2 { border-top-width: 0px; border-bottom-width: 2px; border-left-width: 1px; border-right-width: 1px }<br />
<br />
</style><br />
<br />
Next, you have your two tables, let's make them pretty basic so it's easy to understand:<br />
<br />
<table border="1" cellspacing="0" cellpadding="0" width="500" height="200"><br />
<tr><br />
<td></td><br />
</tr><br />
</table><br />
<br />
<table border="1" cellspacing="0" cellpadding="0" width="500" height="200"><br />
<tr><br />
<td></td><br />
</tr><br />
</table><br />
<br />
Simple enough, both of these tables have equal attributes. Now what you want to do is add the CSS attributes for our tables that we defined in the <head> tag. You do this by add class="table1" and class="table2" inside each of your tables(table1 going inside the first table, table2 going in the second..). So it should finally look like this:<br />
<br />
<table class="table1" border="1" cellspacing="0" cellpadding="0" width="500" height="200"><br />
<tr><br />
<td></td><br />
</tr><br />
</table><br />
<br />
<table class="table2" border="1" cellspacing="0" cellpadding="0" width="500" height="200"><br />
<tr><br />
<td></td><br />
</tr><br />
</table><br />
<br />
This should give you the appearance of having one table, when actually have two(or more). And I hope you somewhat understand this, I know you said that you don't know html coding. Feel free to ask if you don't understand anything:).<!--content-->correct, <br />
make it a bit shorter though:<br />
table.1 {border-style:solid;border-width:2 2 0 2px;border-color:#000000;}<br />
<br />
border-width:2 2 2 0px; goes in a clock wise motion srating with top<br />
<br />
<br />
dont use width & height like that (deprecated) add it into the css<br />
<br />
table.1 {width:500px;height:200px;............}<br />
always state units in css :)<br />
<br />
<br />
/added<br />
<br />
bgcolor is also deprecated, put it into the css also background-color:#e1eef7;<br />
also a good habit to quote everything, although not necessary, ie. border="8"<!--content-->Good posting, and nice answers.<br />
<br />
I hadn't seen those CSS table attributes used like that before. Nice solution.<br />
<br />
How many browsers support it?<!--content-->I agree, a good solution. But I have to agree with giz’s point about browser support. I can't help but think that way. Which is why I disagree with a lot of this talk of "deprecated" attributes being used, it’s safe and perfectly legal code where a Transitional doctype is used (loose.dtd).<br />
<br />
The whole purpose of Transitional code is to a certain extent backwards compatibility (poor browser support). Visual presentation as the w3c terms it. A lot of more up-to-date CSS falls over badly in older browsers. A lot of very experienced coders still use many deprecated attributes, purely and simply to gain better browser support. I am by no means a guru or the like but I’ve experienced it many times.<br />
<br />
If browsers did offer better support (more importantly – perhaps the emphasis is on users to update them), then more strict code (strict.dtd) would render properly. On a similar note I’ve seen tons of strict code where many of the optional closing tags have been left in, again purely because some browsers make a complete hash of rendering what is 100% valid code.<br />
<br />
I fail to see the relevance of pointing out deprecated attributes in Transitional code? Yeah, it conforms to the (strict) specs but millions of people simply don’t keep bang up to date with the latest browser releases, therefore I believe the author has got to code for the widest general support. Although I do agree about the use of "height", but in general, I disagree. Deprecated attributes are perfectly legal and valid code where a Transitional doctype is used, most importantly it allows better browser support.<!--content-->i would use<br />
border-right: #000000 2px solid<br />
border-left:<br />
border-bottom:<br />
border-top:<br />
<br />
instead of just border: 2 2 0 2<br />
<br />
that way if fofr some reason u want a diff border style for weach side u can just change the solid to whatever<!--content-->certain border attributes aren't supported by all browsers such as NN4, but border-style:solid and border-width are supported by all!!, yup even NN4 :D <br />
<br />
a very nice 'table css' browser compatibility site i came across (gone straight into my bookmarks)<br />
<!-- m --><a class="postlink" href="http://www.course.com/Download">http://www.course.com/Download</a><!-- m --> <!--more-->s/additional/html_appc.pdf<br />
<br />
<br />
dork1337- yup, adapt it to how you need to use it,as someone said before 'there's many ways to skin a cat'<br />
<br />
<br />
/added<br />
i see your point of view, but as you can see i'm a 'fan' of keeping everything up to date.<br />
From my logs 4% average use nn4, 3%misc, 93% ie5/nn6 and above. From my logs i could argue that people are getting up to date with their browsers.<!--content-->I too am a big fan of valid code and always produce it, however I’m not with the school of thought of keeping everything bang up to date as it can make life very difficult indeed (poor browser support).<br />
<br />
Where the author has used a Transitional doctype, it may be mis-leading to quote deprecated attributes conforming to the strict.dtd. I just believe that consideration must be given to why they have coded to Transitional specs, nearly always backwards compatibility and flexibility.<br />
<br />
However, I agree the most relevant point of all is as you say "many ways to skin a cat".<!--content-->
 
Back
Top