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

Forums: Index → Support Requests → Tables - can a single cell with two lines have each line a different colour?

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 2891 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

In a table with a structure like this:

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
10s	normal line extra line

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:

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line

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)

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line

I didn't make the line white, I made the cell after "first line" span 2 rows. -- Fandyllic (talk · 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:

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line

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: border: 1px solid white;

Change that to border-bottom: 1px solid white; --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)

::Or is it an optical illusion - it doesn't look white, yet I've removed the colour code for the bottom cell and it seems to match the white line! 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

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line

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!

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line

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.

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		first line

--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!

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line
10s			1st line
			2nd line

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:

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line
10s			1st line
			2nd line

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.

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line
10s			1st line
			2nd line

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.

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line
10s			1st line
			2nd line

In this example, I used colspan="7" to style the cells in the last two rows.

Here's what I mean by code for empty rows:

|-
|-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.

	20X0	20X1	20X2	20X3	20X4	20X5	20X6	20X7	20X8	20X9
00s		first line
		second line
10s			1st line
			2nd line

--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)