0

I am trying to create HTML Table and give some cells a special border,
you can see the example here - I marked it with Arrow.. enter image description here

Please help me to understand how can I create such border , without using images.

I read this topic, but I could not be able to transfer it to table element or do it as the border of it.. Customizing border properties using zigzag edges

Thanks, Gabi.

Community
  • 1
  • 1
gabi
  • 1,003
  • 5
  • 12
  • 30
  • ahh that old trick, think of an image that's white in part with a grey background. the white may be transparent. the 'border' is perceived by us, but it isn't a css border. p.s. that flight is incredibly expensive! – user3791372 Sep 29 '14 at 21:47
  • So I have to use non-border table and make the border myself by images?? sounds non trivial.. – gabi Sep 29 '14 at 21:50
  • While there are ways to achieve this, they're kinda pointless for this example as they hopelessly overcomplicate a simple presentation issue, and might introduce cross-browser problems. Just use a PNG background, nothing wrong with them. Encode it as a data-URL if you want to avoid the extra round trip. – Niels Keurentjes Sep 29 '14 at 21:50
  • If you make this a table, you would have an issue showing the circle with i on top of a border, not to mention to make a border like that :) – Bojan Petkovski Sep 29 '14 at 21:51
  • The border isn't that hard to create, using both `before` and `after` pseudo-elements with a small rotation. It's just not really worth the effort for this case, and embedding a data-URL PNG is likely shorter in your CSS. – Niels Keurentjes Sep 29 '14 at 21:53
  • @gabi never overcomplicate things. see things in black and white and white and black - http://www.kidsmathgamesonline.com/images/pictures/illusions/facesorvase.jpg – user3791372 Sep 29 '14 at 21:56
  • @user3791372 nice one :). I will use images as suggested here and try to do it.. Thanks – gabi Sep 29 '14 at 21:57
  • on the website, right click over the cell and click view background image ;) – user3791372 Sep 29 '14 at 21:58

1 Answers1

2

The answer is to use an image as a background to the cell. The image contains the curve and the image could be white and grey, or transparent and grey depending on your use case.

Always try to see what could be there instead of what you think is there

faces or vases?

user3791372
  • 4,445
  • 6
  • 44
  • 78
  • Should I use borderless table? so I will paint the border myself? – gabi Sep 29 '14 at 21:59
  • please accept this as the answer if it is :) as for your question well, some of the cells have a grey background, and the image is designed to use the same colour so you don't know where it ends and the cell starts. study the html. from what i can see, some of the cells have borders which can be controlled from css. – user3791372 Sep 29 '14 at 22:01