Issues with html table


#1

Hello!

I have made html table https://jsfiddle.net/master1991/wswgau0n/1

but having few problems i cant solve!

  1. How to remove left and top border for BOX row?
  2. How to force red TD's to stand under green TD's (same line as silver TD's) also
    blue TD's should be in same line as green TD's

i m doing this because
31, 32, 35 and 00, 34, 37 rows need to be smaller than 27 and 28

originally in collored place i had:

<tr >				
	<td align="center"><br></td>
	<td align="center" nowrap></td>
	<td align="center"><br></td>
	<td align="center"></td>
	<td align="center"></td>	
	<td align="center"></td>						
</tr>

<tr>
	<td></td>
	<td></td>
	<td></td>	
	<td></td>
	<td></td>
	<td></td>						
</tr>

But blue and silver row size need to be different!
Please help :slight_smile:


#2

Did you write this? Are you trying to modify a table that someone else wrote?

It's very simple to fix... one just needs another lifetime in which to do it. :unhappy:

How many columns and rows is the outer table supposed to have? I am asking because the <thead> section contains 7 columns (total includes colspans) and colored row in the <tbody> section contains 6 columns. That's a problem. And then there's that nested table....

Can you throw away the rest of the table and make the colored section look the way you want it to? Then make a screen shot so I will know your intent. Right now, it's an improperly formed table.


#3

@ronpat

I did write it! I m bad at css and html
i made new fiddle https://jsfiddle.net/master1991/10xLj42m/
cant do screen shoots at moment.

But result in fiddle is not exactly what i need in TD 7 and TD 9 there will be only number and i need it to be as little as possible


#4

OK, I'm working on it. I made an error in my first view, anyway, so hopefully the second blush will be closer.


#5

I have also tried it out...

Just know I am also new to tables but for learning I tried it out and this is the results I got:

HTML:

<table>
<!-- section -->
		<tr>
			<th colspan="3" rowspan="4">BOX</th>
		</tr>
		<tr>
			<th colspan="2" rowspan="3">1A</th>
		</tr>
		<tr>
			<td colspan="1">2A</td>
		</tr>
		<tr>
			<td colspan="1">3A</td>
		</tr>
<!-- section -->
		<tr>
			<th colspan="3" rowspan="5" style="border:#111 solid 0px;">1B</th>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">2B</td>
		</tr>
		<tr>
			<td>3B</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">4B</td>
		</tr>
		<tr>
			<td>5B</td>
		</tr>
<!-- section -->
		<tr>
			<th colspan="3" rowspan="3" style="border:#111 solid 0px;">1C</th>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">2C</td>
		</tr>
		<tr>
			<td></td>
		</tr>
<!-- section -->
		<tr>
			<th colspan="3" rowspan="4" style="border:#111 solid 0px;">1D</th>
		</tr>
		<tr>
			<td rowspan="3">2D</td>
		</tr>
		<tr>
			<td rowspan="2">3D</td>
		</tr>
		<tr>
			<td>4D</td>
		</tr>
<!-- section -->
		<tr>
			<td rowspan="4">1E</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="3">2E</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">3E</td>
		</tr>
		<tr>
			<td>4E</td>
		</tr>
<!-- section -->
		<tr>
			<td rowspan="4">1F</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="3">2F</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">3F</td>
		</tr>
		<tr>
			<td>4F</td>
		</tr>
<!-- section -->
		<tr>
			<td rowspan="4">1G</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="3">2G</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">3G</td>
		</tr>
		<tr>
			<td>4G</td>
		</tr>
<!-- section -->
		<tr>
			<td rowspan="4">1H</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="3">2H</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">3H</td>
		</tr>
		<tr>
			<td>4H</td>
		</tr>
<!-- section -->
		<tr>
			<th>ABC</th>
			<th colspan="2">BCD</th>
			<th colspan="2">CDE</th>
			<th>DEF</th>
		</tr>
		<tr>
			<td style="background-color:#55f">1</td>
			<td style="background-color:#55f">2</td>
			<td style="background-color:#55f">3</td>
			<td style="background-color:#2f2">4</td>
			<td style="background-color:#2f2">5</td>
			<td style="background-color:#2f2">6</td>
		</tr>
		<tr>
			<td style="background-color:#9e9e9e">7</td>
			<td style="background-color:#9e9e9e">8</td>
			<td style="background-color:#9e9e9e">9</td>
			<td style="background-color:#f22">10</td>
			<td style="background-color:#f22">11</td>
			<td style="background-color:#f22">12</td>
		</tr>
<!-- section -->
		<tr>
			<td colspan="6">1I</td>
		</tr>
		<tr>
			<td colspan="6">1J</td>
		</tr>
<!-- section -->
		<tr>
			<td colspan="4" rowspan="2">1K</td>
		</tr>
		<tr>
			<td colspan="2" style="border:#111 solid 0px;">2K</td>
		</tr>
<!-- section -->
		<tr>
			<td colspan="4" rowspan="2">1L</td>
		</tr>
		<tr style="height:40px;">
			<td colspan="2" style="border:#111 solid 0px;">...</td>
		</tr>
<!-- section -->
		<tr>
			<td colspan="4" rowspan="3">1M</td>
		</tr>
		<tr>
			<td colspan="1" rowspan="2" style="border:#111 solid 0px;">2M</td>
		</tr>
		<tr style="height:40px;">
			<td colspan="1" style="border:#111 solid 0px;">3M</td>
		</tr>
<!-- section -->
		<tr>
			<td colspan="4" rowspan="2">1N</td>
		</tr>
		<tr style="height:40px;">
			<td colspan="2">2N</td>
		</tr>
	</table>

CSS:

	table{
		width:50%;
		text-align:center;
		border:#333 solid 1px;
		box-sizing:border-box;
		border-collapse:collapse;
	}
	tr{
		padding:0px;
		margin:0px;
	}
	th{
		border:#333 solid 1px;
		margin:0px;
		padding:4px;
	}
	td{
		border:#111 solid 1px;
		border
		color:#555;
		padding:4px;
	}

I am sorry if it is not the right way, I don't even know if it is the right but I think I came close to what was trying to be accomplished.....
'
This definitely was a challenge for me :slight_smile: since i am new to it but hey it seems to work :smiley:

PS How do I put a jsfiddle?


#6

@0_0Nathan,

Please start a new thread for your topic or hold your thought until this discussion has finished and I will see what I can do with it then.

Please.


#7

I mean the one I tried out was for his issue of the color boxes I don't know if I did it the way he wanted as this was my first attempt on using tables but I was wondering if it was the same?

I'm not really too interested into tables but this challenge has kind of made it worth looking into.

I was also wondering is it semantically to use tables for page layouts or is it only ment for tabular data?


#8

I think @0_0Nathan was trying to solve the OP's question. A new topic for how to use JSFiddle would be good, though.

Thank you for taking interest in trying this.


#9

Yes! thank you I meant to ask how do we add the jsfiddle to our comments so we can show off the results.

like is it part of this site or is there a jsfiddle site for adding the code like codepen?


#10

I understand what @0_0Nathan was trying to do, but I have an obscure but significant issue that I am preparing to introduce and I would prefer that the thread not become sidetracked. I will be happy to address his code in due time as well as the jsfiddle question.


#11

@0_0Nathan
for now its seems to me 99% as i need :open_mouth:
And you did this first time?

This one will be used for printable report not as web page but as much as i have heard there are people that are making pages this way! But with bootstrap that is not necessary :slight_smile:

You even took out nested table that is good!
Will try now add my details and look how it looks!

A big thanks for your interest in this!


#12

Please wait for Ron's response as 0_0nathans code is invalid and badly broken as can be seen by running it through the validator (although the display may appear to render close to what you want it is not the right way to do it) :slight_smile: .


#13

@PaulOB will do :slight_smile:


#14

Sorry to be slow, @fumeeptc, but I felt that this point was worth mentioning since you are working with a table.

Tables are interesting beasts.

There is an error in your code, https://jsfiddle.net/master1991/10xLj42m/, that is not obvious to the casual observer, but it can have far-reaching effects.

Please take a moment and look at your code carefully... count columns.

In the first row you have 7 columns (one "normal" + three colspan="2" for a total of 7

The next two rows contain only 6 columns. That is an error, of course. All rows must account for the same number of columns. It's a matrix, after all.

But what's the big deal? The table certainly looks good.!.

But notice that the first and last columns are wider than the middle 4. The widths are not eventy distributed. But still it looks good... doesn't it?

I would like for you to make one change to the first row in your fiddle.
Either move the first <td> to the end of the row, like this:

<tr>				
	<td align="center" colspan="2">BCD</td>
	<td align="center" colspan="2">CDE</td>
	<td align="center" colspan="2">DEF</td>						
	<td align="center">ABC</td>
</tr>

OR move colspan="2" from the last cell to the first cell, like this:

<tr>				
	<td align="center" colspan="2">ABC</td>
	<td align="center" colspan="2">BCD</td>
	<td align="center" colspan="2">CDE</td>
	<td align="center">DEF</td>						
</tr>

It does not matter which you do, the number of columns remains 7; only the positon of the unspanned td changes.

You should see this result:

https://jsfiddle.net/10xLj42m/1/
https://jsfiddle.net/10xLj42m/2/

Attention to details matters, especially on a page as complex as the one you are writing. Please go back through your page and balance the HTML so you have the same number of columns accounted for in each row. You may find out that 12 columns is the magic number that will allow your table to look the way you want it to. I don't know that because we have not seen a picture of your ideal table and how it will be used.

Unless told otherwise, I tend to believe that coders want their products to be good quality and to understand how the code works. If I am spending too much time on the nuances of table layouts, please let me know. Otherwise, you need to do some work on your table.

My test page:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>tables, colspans, rowspans</title>
<!--
https://www.sitepoint.com/community/t/issues-with-html-table/283160/4
https://jsfiddle.net/10xLj42m/
-->
    <style>
td,th {
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
}

.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
.silver {background-color:silver;}

td {
    height:2em;   /* Normally, content determines height. */
    color:white;
}

    </style>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th colspan="2">BCD</th>
            <th colspan="2">CDE</th>
            <th colspan="2">DEF</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="blue">1</td>
            <td class="blue">2</td>
            <td class="blue">3</td>
            <td class="green">4</td>
            <td class="green">5</td>
            <td class="green">6</td>
        </tr>
        <tr>
            <td class="silver">7</td>
            <td class="silver">8</td>
            <td class="silver">9</td>
            <td class="red">10</td>
            <td class="red">11</td>
            <td class="red">12</td>
        </tr>
    </tbody>
</table>

</body>
</html>

https://validator.w3.org/nu/

Postscript: colspan and rowspan can be awkward to use because tables interpret the widths of the columns from left to right and rows from top to bottom. If not carefully defined, colspan widths or rowspan heights that depend on antecedent elements (those above or to the left) can be ambiguous and render unexpected results. I am looking for a demo page that I wrote a few years ago that demonstrates the issue using a table with about half a dozen rows and columns. If I find it, I'll attach it here. When I last checked, those colspan and rowspan algorithms were browser dependent. :slight_smile:


#15

@ronpat wow a big answer! Thanks allot for your time!
Part of it helped me allot! Yeah i found out that i made some wrong colon count!

But this does not solve my main issue!

I do not know maybe i m asking it wrong as i told there was some rows that i needed to take maximum less spaces!

Take a look to my new fiddle with all colspans corrected https://jsfiddle.net/master1991/h1gxqvzs/
where 24 and 25 are standing perfect but 28 and 30 should be place just for id and amount for it leaving rest of space to 29 and the same thing for 34, 35 and 36

I hope i did lead you see it as i see it :slight_smile:


#16

I understand completely that it does not solve the main issue. However, before we can fix the main issue, we must fix the problems with the underlying code... and I probably need to understand more about the purpose of the page. Will the contents of the cells be numbers (data) or do some of the cells contain images or descriptive text including prices?

That question is important because using tables for page layout has been obsolete for over 20 years so I would like to talk with you about possibly using a different design, if you have that authority. If the table is being used to display data, then we can continue.

If the current layout is mechanically accurate (like a matrix) then we can continue. In the new fiddle, I count 6 columns of equal width. Is that correct, or will the width of some of the columns change in real life?


#17

As Ron said tables are a matrix with columns and rows that match up exactly. If you need to make cells smaller then you need to start with more columns and span the appropriate cells to make the layout you want. If you split a cell into two columns you can apply a width to one of the cells to make it shrink to content width and the other cell will stretch to the remaining width.

I'm not sure if this is what you are asking but it should show how to split cells and size one smaller than the other.

This starts with a base of 10 columns and splits accordingly.

Note that to be completely valid the first row in a table must establish the max number of columns so that colspans can be computed efficiently otherwise the html validator throws an error. I have just included a blank row but I believe most browsers will work ok without the empty row but of course will make the table invalid.

Error: Table columns in range 3…4 established by element td have no cells beginning in them.

I also removed the invalid align="center" and nowrap attributes you were using as they are invalid and used css instead. I used silly class name like 'center' and nowrap just to show you where they were but they should be more informative classes rather than presentational. However for the purpose of this exercise it doesn't really matter but the class name should distinguish why this cell is different to the others rather than just saying 'center'.

As most of the cells are centred you could cut down on code by only classing the items that are not centred and setting them to the left and then set all the others to centre for their default state .


#18

@PaulOB Hmm i see!Your example looks good and i will try to play with it and will update here how i did!


#19

Yes I was assuming we were talking about tabular data so if this is just a layout exercise then a table is the wrong approach.


#20

@PaulOB @ronpat This gonna be act for printing.
There will bee information in each row
and inside 34, 35, 36 there will be a while loop data