Html table merge row and column

HTML & CSS
1

Is it possible to merge(highlighted with yellow) as should in the below image? if not is their any other way?

685×553 1.18 KB

<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
			<style>
				#t1 {
				visibility: hidden;
				}
		</style>
	</head>
	<body>
		<font face="verdana">
		    <h1 align="center">Test</h1>
			<table align="center" border="1" cellspacing="5" height="500" width="500">
				<tr>
					<td colspan="2" rowspan="2"></td>
					<td rowspan="2" id="t1"></td>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="5" id="t1"></td>
				</tr>
				<tr>
					<td colspan="2"></td>
					<td rowspan="2" id="t1"></td>
					<td></td>
					<td rowspan="2"></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</font>
	</body>
</html>
2

You can’t merge half a cell so the top right yellow highlight is impossible. If you are expecting data to suddenly flow around a block to the bottom left (of the top right section) then that can only be achieved with floats but would only work if heights were known beforehand as you can’t specifically float to the bottom.

The second (bottom left) yellow highlight just looks like a colspan which you have already done in the cell above so seems like an odd question :slight_smile:

It would probably be more pertinent to see an example with data (or content) so we can see why you need to maintain that pattern? If it’s just a shape with html that you want then that would be possible for a fixed width and height scenario as long as you didn’t want any real content in there.

3 Likes
3

@PaulOB Yah, actually there will be no content, it’s just a shape.
What should i do to merge those cell then?

1 Like
4

As I mentioned you can’t actually merge the cells but you could rub out the borders with a pseudo element and then create new borders with more absolutely placed pseudo elements.

There are many other ways to create the illusion of that shape but of course it won’t be able to hold data in any usable way.

I’m on a mobile at the moment so can’t offer code but the methods I suggest are just basic css so shouldn’t be too hard to work out:).

1 Like
5

@PaulOB I can’t seem to find a way to complete as i’m new at this.

6

Take a formal HTML course. It will be time well spent.

2 Likes
7

@ronpat Thanks for your suggestion. I already did, but i’m not able to find a solution to this, that’s the reason i’ve posted here…to get some help.

1 Like
8

This is very quick so there may be an easier way to do it but keeping to your table layout you can do it like this:

However, If its just a pattern then it would have been easier width divs of fixed size etc.

3 Likes
9

@PaulOB Thank you. You’re so helpful. :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.