rasinton

UPDATE

I have now managed to get the table looking like I want, but, cannot help thinking the CSS code is not very elegant or efficient. In particular, I have put the border on each individual cell, which doesn’t feel right!

If you have a spare few minutes, could you have a look at what I’ve used and suggest any better ways you can spot, please?

Thanks.

Here it comes…..

[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

#content .BoxLeague-Format thead th {
	font-size: 32px;
	text-align: center;
}

.BoxLeague-Format th,
.BoxLeague-Format td {
	padding: 1px;
	border-color: #000000;
}

.BoxLeague-Format thead th {
	background-color: #000000;
}

.BoxLeague-Format .row-3 .column-2 {
	background-color: #BDBDBD;
}

.BoxLeague-Format .row-4 .column-3 {
	background-color: #BDBDBD;
}

.BoxLeague-Format .row-5 .column-4 {
	background-color: #BDBDBD;
}

.BoxLeague-Format .row-6 .column-5 {
	background-color: #BDBDBD;
}

#content .BoxLeague-Format .column-1 {
	width: 200px;
}

#content .BoxLeague-Format .column-2 {
	width: 50px;
	text-align: center;
}

#content .BoxLeague-Format .column-3 {
	width: 50px;
	text-align: center;
}

#content .BoxLeague-Format .column-4 {
	width: 50px;
	text-align: center;
}

#content .BoxLeague-Format .column-5 {
	width: 50px;
	text-align: center;
}

#content .BoxLeague-Format .column-6 {
	width: 50px;
	text-align: center;
	font-weight: bold;
}

#content .BoxLeague-Format {
	border: solid #000000;
	border-bottom-left-radius: 5em;
	border-bottom-right-radius: 5em;
	border-top-left-radius: 5em;
	border-top-right-radius: 5em;
}

#content .BoxLeague-Format .row-3 .column-1 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-3 .column-2 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-3 .column-3 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-3 .column-4 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-3 .column-5 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-4 .column-1 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-4 .column-2 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-4 .column-3 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-4 .column-4 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-4 .column-5 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-5 .column-1 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-5 .column-2 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-5 .column-3 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-5 .column-4 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-5 .column-5 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-6 .column-1 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-6 .column-2 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-6 .column-3 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-6 .column-4 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .row-6 .column-5 {
	border: thin solid #000000;
}

#content .BoxLeague-Format .column-6 {
	border-left: medium double #000000;
	border-right: thin solid #000000;
	border-top: thin solid #000000;
	border-bottom: thin solid #000000;
}

Thanks.

It might not be a problem for you but I can foresee lots of questions as I attempt to do this – be warned!!!!!

Thanks for reply.

Got the font size right, now.

I have tried to use the colspan button and have the “Presidents” text in column 1 and “#colspan#” in column 2, but it seems to not have the effect I was hoping. I would like the text to appear across the 2 columns.

Do I need to do something to centre-align it?

Yes, all sorted now – thanks!