how to give html table such border as shown in picture?

youveggie · Jun 10, 2021

hey guys, I am creating custom size charts in html and basically i'm in a need to give my rowspan such borders:

how can I do this?

thanks in advance!

TomTheCat · Jun 10, 2021

CSS:

border: 2px solid #000;

youveggie · Jun 10, 2021

TomTheCat said:
CSS:

border: 2px solid #000;

I dont think that you get what i'm asking for

I want to separate "A Cups" and "B Cups" with border that stands out.

my code:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  font-size:22px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #33333371;
  text-align: left;
  padding: 8px;
}

tr:nth-child(2n) {
  background-color: #dddddd8a;
}
</style>
</head>
<body>

<h2>Size Table</h2>
<table>
    <caption>Size Table</caption>
    <tr>
     <th>BRA</th>
     <th>EU/Int Bra Size</th>
     <th>Band Under Bust (cm)</th>
     <th>Cup Over Bust (cm)</th>
     <th>Band Under Bust (in)</th>
     <th>Cup Over Bust (in)</th>
    </tr>
    <tr>
     <th rowspan="5">A Cups</th>
    <tr><td>70A</td><td>70-75</td><td>82-84</td><td>27.5-29.5</td><td>32.5-33</td></tr>
    <tr><td>75A</td><td>75-80</td><td>87-89</td><td>29.5-31.5</td><td>34.5-35</td></tr>
    <tr><td>80A</td><td>80-85</td><td>92-94</td><td>31.5-33.5</td><td>36-37</td></tr>
    <tr><td>85A</td><td>85-90</td><td>97-99</td><td>33.5-35.5</td><td>38-39</td></tr>
    </tr>

    <th rowspan="5">B Cups</th>
    <tr><td>70B</td><td>70-75</td><td>84-86</td><td>27.5-29.5</td><td>33-34</td></tr>
    <tr><td>75B</td><td>75-80</td><td>89-91</td><td>29.5-31.5</td><td>35-36</td></tr>
    <tr><td>80B</td><td>80-85</td><td>94-96</td><td>31.5-33.5</td><td>37-38</td></tr>
    <tr><td>85B</td><td>85-90</td><td>99-101</td><td>33.5-35.5</td><td>39-40</td></tr>
    </tr>

    <th rowspan="5">C Cups</th>
    <tr><td>70C</td><td>70-75</td><td>86-88</td><td>27.5-29.5</td><td>34-34.5</td></tr>
    <tr><td>75C</td><td>75-80</td><td>91-93</td><td>29.5-31.5</td><td>36-36.5</td></tr>
    <tr><td>80C</td><td>80-85</td><td>96-98</td><td>31.5-33.5</td><td>38-38.5</td></tr>
    <tr><td>85C</td><td>85-90</td><td>101-103</td><td>33.5-35.5</td><td>40-40.5</td></tr>
    </tr>

    <th rowspan="5">D Cups</th>
    <tr><td>70C</td><td>70-75</td><td>88-90</td><td>27.5-29.5</td><td>34.5-35.5</td></tr>
    <tr><td>75C</td><td>75-80</td><td>93-95</td><td>29.5-31.5</td><td>36.5-37.5</td></tr>
    <tr><td>80C</td><td>80-85</td><td>98-100</td><td>31.5-33.5</td><td>38.5-39.5</td></tr>
    <tr><td>85C</td><td>85-90</td><td>103-105</td><td>33.5-35.5</td><td>40.5-41.5</td></tr>
    </tr>
 
   </table>


</body>
</html>

TomTheCat · Jun 10, 2021

As I said, with

CSS:

border: 2px solid #000;

Of course, you should make a class for the styles I made. I did it in rush, to show you

.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  font-size:22px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #33333371;
  text-align: left;
  padding: 8px;
}

tr:nth-child(2n) {
  background-color: #dddddd8a;
}
</style>
</head>
<body>

<h2>Size Table</h2>
<table>
    <caption>Size Table</caption>
    <tr>
     <th>BRA</th>
     <th>EU/Int Bra Size</th>
     <th>Band Under Bust (cm)</th>
     <th>Cup Over Bust (cm)</th>
     <th>Band Under Bust (in)</th>
     <th>Cup Over Bust (in)</th>
    </tr>
    <tr>
     <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">A Cups</th>
    <tr style="border-top: 2px solid #000;border-right: 2px solid #000;"><td>70A</td><td>70-75</td><td>82-84</td><td>27.5-29.5</td><td>32.5-33</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75A</td><td>75-80</td><td>87-89</td><td>29.5-31.5</td><td>34.5-35</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80A</td><td>80-85</td><td>92-94</td><td>31.5-33.5</td><td>36-37</td></tr>
    <tr style="border-bottom: 2px solid #000;border-right: 2px solid #000;"><td>85A</td><td>85-90</td><td>97-99</td><td>33.5-35.5</td><td>38-39</td></tr>
    </tr>

    <th rowspan="5">B Cups</th>
    <tr><td>70B</td><td>70-75</td><td>84-86</td><td>27.5-29.5</td><td>33-34</td></tr>
    <tr><td>75B</td><td>75-80</td><td>89-91</td><td>29.5-31.5</td><td>35-36</td></tr>
    <tr><td>80B</td><td>80-85</td><td>94-96</td><td>31.5-33.5</td><td>37-38</td></tr>
    <tr><td>85B</td><td>85-90</td><td>99-101</td><td>33.5-35.5</td><td>39-40</td></tr>
    </tr>

    <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">C Cups</th>
    <tr style="border-top: 2px solid #000; border-right: 2px solid #000;"><td>70C</td><td>70-75</td><td>86-88</td><td>27.5-29.5</td><td>34-34.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75C</td><td>75-80</td><td>91-93</td><td>29.5-31.5</td><td>36-36.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80C</td><td>80-85</td><td>96-98</td><td>31.5-33.5</td><td>38-38.5</td></tr>
    <tr style="border-bottom: 2px solid #000; border-right: 2px solid #000;"><td>85C</td><td>85-90</td><td>101-103</td><td>33.5-35.5</td><td>40-40.5</td></tr>
    </tr>

    <th rowspan="5">D Cups</th>
    <tr><td>70C</td><td>70-75</td><td>88-90</td><td>27.5-29.5</td><td>34.5-35.5</td></tr>
    <tr><td>75C</td><td>75-80</td><td>93-95</td><td>29.5-31.5</td><td>36.5-37.5</td></tr>
    <tr><td>80C</td><td>80-85</td><td>98-100</td><td>31.5-33.5</td><td>38.5-39.5</td></tr>
    <tr><td>85C</td><td>85-90</td><td>103-105</td><td>33.5-35.5</td><td>40.5-41.5</td></tr>
    </tr>

   </table>


</body>
</html>

youveggie · Jun 10, 2021

TomTheCat said:

As I said, with

CSS:

border: 2px solid #000;

Of course, you should make a class for the styles I made. I did it in rush, to show you

.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  font-size:22px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #33333371;
  text-align: left;
  padding: 8px;
}

tr:nth-child(2n) {
  background-color: #dddddd8a;
}
</style>
</head>
<body>

<h2>Size Table</h2>
<table>
    <caption>Size Table</caption>
    <tr>
     <th>BRA</th>
     <th>EU/Int Bra Size</th>
     <th>Band Under Bust (cm)</th>
     <th>Cup Over Bust (cm)</th>
     <th>Band Under Bust (in)</th>
     <th>Cup Over Bust (in)</th>
    </tr>
    <tr>
     <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">A Cups</th>
    <tr style="border-top: 2px solid #000;border-right: 2px solid #000;"><td>70A</td><td>70-75</td><td>82-84</td><td>27.5-29.5</td><td>32.5-33</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75A</td><td>75-80</td><td>87-89</td><td>29.5-31.5</td><td>34.5-35</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80A</td><td>80-85</td><td>92-94</td><td>31.5-33.5</td><td>36-37</td></tr>
    <tr style="border-bottom: 2px solid #000;border-right: 2px solid #000;"><td>85A</td><td>85-90</td><td>97-99</td><td>33.5-35.5</td><td>38-39</td></tr>
    </tr>

    <th rowspan="5">B Cups</th>
    <tr><td>70B</td><td>70-75</td><td>84-86</td><td>27.5-29.5</td><td>33-34</td></tr>
    <tr><td>75B</td><td>75-80</td><td>89-91</td><td>29.5-31.5</td><td>35-36</td></tr>
    <tr><td>80B</td><td>80-85</td><td>94-96</td><td>31.5-33.5</td><td>37-38</td></tr>
    <tr><td>85B</td><td>85-90</td><td>99-101</td><td>33.5-35.5</td><td>39-40</td></tr>
    </tr>

    <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">C Cups</th>
    <tr style="border-top: 2px solid #000; border-right: 2px solid #000;"><td>70C</td><td>70-75</td><td>86-88</td><td>27.5-29.5</td><td>34-34.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75C</td><td>75-80</td><td>91-93</td><td>29.5-31.5</td><td>36-36.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80C</td><td>80-85</td><td>96-98</td><td>31.5-33.5</td><td>38-38.5</td></tr>
    <tr style="border-bottom: 2px solid #000; border-right: 2px solid #000;"><td>85C</td><td>85-90</td><td>101-103</td><td>33.5-35.5</td><td>40-40.5</td></tr>
    </tr>

    <th rowspan="5">D Cups</th>
    <tr><td>70C</td><td>70-75</td><td>88-90</td><td>27.5-29.5</td><td>34.5-35.5</td></tr>
    <tr><td>75C</td><td>75-80</td><td>93-95</td><td>29.5-31.5</td><td>36.5-37.5</td></tr>
    <tr><td>80C</td><td>80-85</td><td>98-100</td><td>31.5-33.5</td><td>38.5-39.5</td></tr>
    <tr><td>85C</td><td>85-90</td><td>103-105</td><td>33.5-35.5</td><td>40.5-41.5</td></tr>
    </tr>

   </table>


</body>
</html>

dang!
why I didn't think of this. :| thats actually easier that I expected. thanks!

TomTheCat · Jun 10, 2021

youveggie said:
dang!
why I didn't think of this. :| thats actually easier that I expected. thanks!

I don't like to talk to much, that's why I gave that first answer. Yeah, amazing things are easier to do, we have to think outside the box.

youveggie · Jun 10, 2021

TomTheCat said:
I don't like to talk to much, that's why I gave that first answer. Yeah, amazing things are easier to do, we have to think outside the box.

I dont like to talk too much either, but when I talk i talk about tables and bralletes.

TomTheCat said:
you should make a class for the styles

thats what i tried to do, but I couldnt figure it out. Tried to give class to th, tr, also wrapped different sections in div tried to separate them with tables, but everything i tried gave me some weird results

Sardi · Jun 10, 2021

cpapussface said:
Thank you!!

Innapropiatte name and spamming the forum, you are about to have a nice badge rn. Bye

Sardi · Jun 10, 2021

cpaalcohol said:
Oh! very good one

you too reported

davids355 · Jun 10, 2021

TomTheCat said:

As I said, with

CSS:

border: 2px solid #000;

Of course, you should make a class for the styles I made. I did it in rush, to show you

.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  font-size:22px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #33333371;
  text-align: left;
  padding: 8px;
}

tr:nth-child(2n) {
  background-color: #dddddd8a;
}
</style>
</head>
<body>

<h2>Size Table</h2>
<table>
    <caption>Size Table</caption>
    <tr>
     <th>BRA</th>
     <th>EU/Int Bra Size</th>
     <th>Band Under Bust (cm)</th>
     <th>Cup Over Bust (cm)</th>
     <th>Band Under Bust (in)</th>
     <th>Cup Over Bust (in)</th>
    </tr>
    <tr>
     <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">A Cups</th>
    <tr style="border-top: 2px solid #000;border-right: 2px solid #000;"><td>70A</td><td>70-75</td><td>82-84</td><td>27.5-29.5</td><td>32.5-33</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75A</td><td>75-80</td><td>87-89</td><td>29.5-31.5</td><td>34.5-35</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80A</td><td>80-85</td><td>92-94</td><td>31.5-33.5</td><td>36-37</td></tr>
    <tr style="border-bottom: 2px solid #000;border-right: 2px solid #000;"><td>85A</td><td>85-90</td><td>97-99</td><td>33.5-35.5</td><td>38-39</td></tr>
    </tr>

    <th rowspan="5">B Cups</th>
    <tr><td>70B</td><td>70-75</td><td>84-86</td><td>27.5-29.5</td><td>33-34</td></tr>
    <tr><td>75B</td><td>75-80</td><td>89-91</td><td>29.5-31.5</td><td>35-36</td></tr>
    <tr><td>80B</td><td>80-85</td><td>94-96</td><td>31.5-33.5</td><td>37-38</td></tr>
    <tr><td>85B</td><td>85-90</td><td>99-101</td><td>33.5-35.5</td><td>39-40</td></tr>
    </tr>

    <th rowspan="5" style="border-top: 2px solid #000;border-bottom: 2px solid #000;border-left: 2px solid #000;">C Cups</th>
    <tr style="border-top: 2px solid #000; border-right: 2px solid #000;"><td>70C</td><td>70-75</td><td>86-88</td><td>27.5-29.5</td><td>34-34.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>75C</td><td>75-80</td><td>91-93</td><td>29.5-31.5</td><td>36-36.5</td></tr>
    <tr style="border-right: 2px solid #000;"><td>80C</td><td>80-85</td><td>96-98</td><td>31.5-33.5</td><td>38-38.5</td></tr>
    <tr style="border-bottom: 2px solid #000; border-right: 2px solid #000;"><td>85C</td><td>85-90</td><td>101-103</td><td>33.5-35.5</td><td>40-40.5</td></tr>
    </tr>

    <th rowspan="5">D Cups</th>
    <tr><td>70C</td><td>70-75</td><td>88-90</td><td>27.5-29.5</td><td>34.5-35.5</td></tr>
    <tr><td>75C</td><td>75-80</td><td>93-95</td><td>29.5-31.5</td><td>36.5-37.5</td></tr>
    <tr><td>80C</td><td>80-85</td><td>98-100</td><td>31.5-33.5</td><td>38.5-39.5</td></tr>
    <tr><td>85C</td><td>85-90</td><td>103-105</td><td>33.5-35.5</td><td>40.5-41.5</td></tr>
    </tr>

   </table>


</body>
</html>

youveggie said:
dang!
why I didn't think of this. :| thats actually easier that I expected. thanks!

Thread moved abs seeing as it’s been answered; thread closed

how to give html table such border as shown in picture?

youveggie

Power Member

TomTheCat

Elite Member

youveggie

Power Member

TomTheCat

Elite Member

youveggie

Power Member

TomTheCat

Elite Member

youveggie

Power Member

Sardi

Power Member

Sardi

Power Member

davids355

Super Moderator

Main Menu

Marketplace

Making Money

BlackHat World