Forum:Tables - can a single cell with two lines have each line a different colour?

In a table with a structure like this:

is it possible to make the text "extra line" have a white background? EmmerdaleWiki   Talk      13:44, February 22, 2012 (UTC)


 * It might be easier regardless if I redesign it slightly thus:

Could someone help me get rid of the visible line in between the two rows please? EmmerdaleWiki   Talk      14:32, February 22, 2012 (UTC)


 * Maybe a way to make the line white? Iggyvolz 15:30, February 22, 2012 (UTC)


 * If that's the easiest/only available option it would certainly do. Sometimes the line would need to be a colour other than white so something that hides the line would be preferable. Other than that as long as I can customise the colour for each part of the line individually that would be fine. EmmerdaleWiki    Talk      16:07, February 22, 2012 (UTC)


 * I didn't make the line white, I made the cell after "first line" span 2 rows. -- Fandyllic (talk &middot; contr) 22 Feb 2012 8:42 AM Pacific
 * Thanks, but that hasn't hidden the line between "first line" and "second line". Is it possible to hide or make this line white? Or perhaps the original querry is possible? EmmerdaleWiki    Talk      16:56, February 22, 2012 (UTC)

I hoped someone would have come up with a solution by now :( To change sliightly what I said yesterday in reply to Iggyvolz, what I want is actually just three looks - all white cells, all single-coloured cells (both of which can be done with row-span in the second method), and cells with the top half coloured and the bottom half white. So, yes, if the line can be made to go white that would definitely do the trick. Can anyone help, please? EmmerdaleWiki    Talk      13:39, February 23, 2012 (UTC)


 * Although, when I say "white" I actually mean the standard colour the table cells come in. If the grid lines can only be changed to white though, it wouldn't be a problem to make the cells white, too. In fact, every reference to "white" on this page ought to be read as "clear"! Sorry about that! EmmerdaleWiki    Talk      13:43, February 23, 2012 (UTC)
 * Or maybe the cell can be changed to gray, so it blends in with the line? Iggyvolz 15:49, February 23, 2012 (UTC)
 * The problem with that is the blank cells will be darker than I'd intended (which is important as there needs to be a distinction between 'empty' cells and 'filled-in' cells), and it will also in the process hide the vertical lines, which I'd like to keep.
 * Why did you ask yesterday "Maybe a way to make the line white?" if you don't actually know a way of doing this? It's a solution I've said is suitable, yet you seem unable to tell me how to do it? :(

OK, I've got to this so far:

Can someone help me do it so that only the bottom line is made white, please? EmmerdaleWiki  Talk    19:03, February 27, 2012 (UTC)


 * In the table above, you have given the cell with a blue background the following style:
 * Change that to  --Gardimuer { ʈalk } 22:35, February 27, 2012 (UTC)
 * Great, thanks!...Except I've made the same "white" mistake again! Can anybody tell me what shade of grey the unfilled cells default colour actually is, please? EmmerdaleWiki   Talk    22:46, February 27, 2012 (UTC)

Does anyone know for sure if the cells come with a natural tint? EmmerdaleWiki  Talk    22:58, February 27, 2012 (UTC)
 * It can't be an optical illusion because you can see a feint tint even in the empty right hand part of the table! I think I'll ask elsewhere though! EmmerdaleWiki   Talk    23:20, February 27, 2012 (UTC)

Solution: With thanks to Gardimuer

The line between the two cells now matches the bottom cell. Although having looked at it I now realise that in fact it looks better if the line matches the filled in cell, so everything after "Great, thanks!" was actually a waste of time! At least the solution is out there should anyone else wish to do it this way! EmmerdaleWiki  Talk    02:39, February 28, 2012 (UTC)

I was obviously more tired than I realised last night. THIS is the real solution!

It's not 100% perfect as the vertical lines are slightly broken up, but I imagine it's the closest you can get to what I was looking for! EmmerdaleWiki  Talk    08:21, February 28, 2012 (UTC)


 * Or, if you weren't using class wikitable, you could just remove the unwanted horizontal borders by using rules="cols". Using this method would circumvent the problem of needing the horizontal cell borders to match the background color, and would also remove the issue of your horizontal cell borders leaving 1px gaps in some of your vertical borders.


 * --Gardimuer { ʈalk } 16:49, February 28, 2012 (UTC)

That might be the perfect solution - except I think I need some help finishing off the jigsaw! Now I have no vertical lines at all!

Can this final problem be fixed? EmmerdaleWiki  Talk    00:37, February 29, 2012 (UTC)

border-bottom: 0px Granpa 20:10, February 28, 2012 (UTC)
 * That doesn't work - if its "0px" it has no effet on the look. EmmerdaleWiki   Talk    00:37, February 29, 2012 (UTC)

OK, I've realised why! Here is the (incomplete) solution:

Ah, it is only incomplete on certain browsers! The vertical lines aren't always visible unless they're coded in, but on IE the 2010's column looks fine! EmmerdaleWiki  Talk    01:15, February 29, 2012 (UTC)


 * That is happening because you keep making bad table code, having different numbers of cells in your rows. You should always have the same number of cells in each row of your table, otherwise browsers will try to correct for the error and end up displaying the table inconsistently.


 * I've corrected the code by making sure that there are 11 cells in each row. You should also be careful about having code for completely vacant rows, as you do in your table code above. --Gardimuer { ʈalk } 07:22, February 29, 2012 (UTC)


 * "You should also be careful about having code for completely vacant rows, as you do in your table code above" I do? As for not completing the table, I've deliberately done it like that as 2013-2019 hasn't happenned yet, so I think it looks better. Does it really matter coding it as I did? Because if it does I'll just have to add some white bordered cells. It seems simpler to leave the cells empty. I know different browsers will display it slightly differently, but as long as the content part still looks as it should, I don't mind. EmmerdaleWiki   Talk      10:56, February 29, 2012 (UTC)

(This is an example of what a page should look like when complete w:c:emmerdalewiki:1 January) EmmerdaleWiki   Talk      14:07, February 29, 2012 (UTC)


 * Instead of leaving out cells, you could have a cell that spans multiple columns to take up the extra space.


 * In this example, I used  to style the cells in the last two rows.
 * Here's what I mean by code for empty rows:


 * -valign="top"
 * -valign="top"
 * Each |- is code to close one row and begin another, so you should never have two right on top of eachother. The bad code was removed in your 10:56, 2012 February 29 (UTC) edit, so either you noticed it and fixed it, or the RTE automatically corrected it. --Gardimuer { ʈalk } 23:02, February 29, 2012 (UTC)
 * OK, so yes I can use rowspan instead of white borders, but I'll ask again, is it actually important? Your version forces a border all the way around the table. I know it looks like that anyway on firefox & AOL, but I prefer the IE look where the bottom right of the table is just empty space. If there is no adverse effect of doing it the way I've been doing it I'd like to carry on that way, if I can. EmmerdaleWiki   Talk      23:29, February 29, 2012 (UTC)


 * Leaving cells out of tables is broken html code. Just because current generation browsers have the ability to compensate for your mistakes doesn't mean that you should make bad code. It is also bad webdesign practice to create html that will display differently for over 20% of the visitors to your site. --Gardimuer { ʈalk } 15:52, March 1, 2012 (UTC)


 * OK, well I'm going to want a bit more help then if you don't mind, please. I think you're American, right? Emmerdale is a UK soap opera, and so with any luck the show will still be around to start the 2020's row (it celebrates its 40th birthday this year), which is why I really wanted an open-ended look, rather than seal it off at the end of 2019. So I would now like to add a white border to the bottom and bottom right so that everything after the 2012 cell(s) looks empty. I had a go myself but it didn't seem to be working. Could you possibly do this for me, please? EmmerdaleWiki   Talk      16:35, March 1, 2012 (UTC)


 * If I am not mistaken, the following table has the style you want.


 * --Gardimuer { ʈalk } 08:27, March 2, 2012 (UTC)

Super! How come there is a rowspan="8" though? Or was it a typo? I'm curious as to what has happenned with the row headers, too, as "00s" is centred but "10s" isn't. I added "valign = "center"" which centred "10s", but made "00s" move to the top. When I added "valign = "center"" to "00s" as well, it appeared as text in the table! ?? It seems odd that this would happen. Thanks for all your help in doing this, it's much appreciated. EmmerdaleWiki  Talk      09:32, March 2, 2012 (UTC)
 * Actually, I've just logged in on AOL and there's no outer border on the right hand side or along the bottom underneath the 2003 - 2009 columns. It looks awful! EmmerdaleWiki   Talk      09:53, March 2, 2012 (UTC)