Nicholas Hubbard Web Design

An HTML Table with Divided Columns and No External Borders

To add strictly horizontal border lines without styling inner tables’ borders, Mr. Sweeney suggests using CSS to style tags for the outer table’s border.

Removing outer border in html table

To eliminate outer borders in certain tables, simply include n-bordered and class within each respective table.

.border-none < border-collapse: collapse; border: none; >.border-none td < border: 1px solid black; >.border-none tr:first-child td < border-top: none; >.border-none tr:last-child td < border-bottom: none; >.border-none tr td:first-child < border-left: none; >.border-none tr td:last-child

 
 
Cell 1
 
Cell 2
 
Cell 3
 
 
Cell 4
 
Cell 5
 
Cell 6
 
 
Cell 7
 
Cell 8
 
Cell 9
 
 
Cell 10
 
Cell 11
 
Cell 12
 
 

Unclear about your requirements, therefore, please take a look at this and we can gradually address the issue. As per Mr. Sweeney, you prefer to retain the outer table’s border while eliminating the borders of the inner tables. The location of the two inner table borders is indicated by the dashed black line. The code includes instructions on how to delete them.

table#main < border: 2px dashed blue; border-collapse: collapse; >td < border: 1px solid red; height: 80px; >td table < border: 1px dashed black; >/* Replace the last line with this one */ /* td table < border: none; >*/

• Blue Dashed = Outer Table
• Black Dashed = Inner Table
• Red Solid = Cell

  Solution 3:

  Simply indicate the tables for which you would like to eliminate the border. For example:

  td table, td table th, td table td

This command picks out all instances of table , th , and td found inside a separate td table. It should be noted that the top-level table will remain unchanged.

For customizing the appearance of individual td s in a table, rely on their corresponding id s. Proceed with something similar to:

To style a specific element among several td elements, you can utilize the approach mentioned earlier, in case you have more than one such element.

HTML Table Borders, To avoid having double borders like in the example above, set the CSS border-collapse property to collapse. This will make the borders collapse into a single border: Example. table, th, td <. border: 1px solid black;

TABLE with no vertical cell borders

Horizontal border lines can be incorporated into tr tags through CSS styling in a purely horizontal manner.

You have the freedom to select any border width, color, and style as per your preference.

A JS Fiddle link can be found at http://jsfiddle.net/XPyzM/.

If you’re using the outdated format, , update it to .

HTML table without space between columns, Browse other questions tagged html css html-table or ask your own question. The Overflow Blog Code completion …

Border around a specific column in a table in HTML

Check out the for a reference on how to create column borders that are not styled the same throughout each row.

Источник

How do I remove all of the borders from an HTML ? [closed]

I just made my new website public. I need help removing ALL of the borders from the table on my website, http://nicholashubbard.cu.cc. I have tried almost every solution on Stack Overflow that I can find, but none of them worked. I will provide the following examples: HTML Code:

               
  
I am a web developer with real results. Together, we can build the site of your dreams.
 
 
 
 
Simple Website
 
$15
 
Let's a-go! 
 
 
Advanced Website
 
$45
 
We have liftoff!
 
 
Extreme Website
 
$100
 
Let's do this. 
 
 
 
 
 
 
A site by Nicholas Hubbard
 
   

* < -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; >[class^="icon- "]:before, [class*=" icon-"]:before < vertical-align: baseline; line-height: 1em; color: inherit; >i.icon < text-align: center; background-image: none; >body .pull-center < display: block; margin-left: auto; margin-right: auto; >body < padding-left: 0; padding-right: 0; >#page- wrapper < position: relative; width: 980px; margin: 0 auto; overflow: hidden; height: 1000px; >#absolute-wrapper p, #absolute-wrapper h1, #absolute-wrapper h2, #absolute-wrapper h3, #absolute-wrapper h4, #absolute-wrapper h5, #absolute-wrapper h6 < margin-top: 0 !important; >#absolute-wrapper < position: relative; width: 980px; margin: 0 auto; height: 1px; >#absolute-wrapper .image < width: 980px; height: 242px; position: absolute; top: 0; left: 0; >#absolute-wrapper .navbar < width: 940px; height: 42px; position: absolute; top: 253px; left: 19px; >#absolute-wrapper .navbar .navbar-inner < height: 42px; padding-left: 20px; padding-right: 20px; >#absolute-wrapper .navbar .nav li a < font-size: 20px; font-family: "roboto"; >#absolute- wrapper .navbar .nav li a.a-1 < color: #000000; >#absolute-wrapper .navbar .nav li a.a-2 < color: #050505; >#absolute-wrapper .paragraph < width: 933px; height: 42px; position: absolute; top: 314px; left: 23px; >#absolute-wrapper .paragraph p < font-family: "roboto"; font-size: 17px; color: #fdfcfc; >#absolute-wrapper .table < width: 400px; height: 200px; position: absolute; top: 389px; left: 290px; >#absolute-wrapper .table tbody tr td < font-family: "roboto"; font-size: 20px; >#absolute-wrapper .table tbody tr td.td-1 < color: #ffffff; >#absolute-wrapper .table tbody tr td.td-2 < color: #fdfdfd; >#absolute-wrapper .table tbody tr td.td-3 < color: #fdfcfc; >body < background: black; text-align: center; >.meh < font-family: Roboto; >.override < font-family: Pacifico; >td

I also have provided what it looks like right now I would like to remove the lines in between the table objects. How would I do this?

Источник

Table Without Border in HTML

The table without borders is a design view of the web page using an HTML table. The use of the table simplifies the presentation of the large information in the simplest form.

Web development, programming languages, Software testing & others

• Table with or without borders used for comparison in between the items.
• Textual & Numerical information both can be present in the tabular format.

In the HTML page, a lot of the tabular structure is created without the border. Using the border in the table design is dependent on its uses. A tabular design on the page can be created using the following HTML.

 
 
S.No
 
Name
 
Date of Birth
 
Profile
 
Salary
 
 
 
1
Jeff Smith
 
35
 
Assistant Manager
 
120,000
 
 
2
 
Maria Garcia
 
42
 
Department Head
 
85,000
 
 
3
 
David Rodriguez
 
37
 
Senior Sales Executive
 
45,000
 
 
4
 
Eyon Shih
 
32
 
Sales Executive
 
35,000
 
 
 

The above-given table structure will display data in the table format as given in the below screenshot.

In the above-given screenshot, the border is not available. By default, the border remains unavailable in the table design. To enable the border in the table, need to add a style border; this border contains three things such as the size of the border (like as in px), type of the border (like as solid, thin, inherit, etc.) & third one is the color (such as red, blue, black, green, color code).

Table border makes an easier representation of the table, separation of rows and columns.

Types of Table Without Border

Given are the types of a table without borders:

1. Nesting Tables

Nesting tables refer to the tables inside the table. Nesting of tables is not a good practice, but in some cases, it becomes necessary to use a table inside of the table. It may be ridiculous to use the nesting of tables due to its accessibility & confusing markup.

Example:

In the below-given table, two tables are nested inside of parent table columns.

 
 
Description
 
Electricals & Electronics
 
Computers & Accessories
 
 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
 
 
 
Television
 
Washing Machine
 
Fan
 
 
Induction
 
Room Heater
 
Iron
 
 
Inverter Kits
 
Circuits
 
CPU
 
 
Keyboard
 
Mouse
 
Scanner
 
 
 
 
 
 
 
 
Laptop
 
Monitor
 
CPU
 
 
Keyboard
 
Mouse
 
Scanner
 
 
 
 
 
 
 

Style:

The below-given style used to represent the more clear view of the nested table design.

 table th < width: 200px; text-align: center; >td.text < text-align: justify; padding: 5px; >table table, table table td 

Parent table having no border. but the inner table containing the border in it. For clear representation, the border is used in the nested table. We can remove the border from the nested table by removing the border-related styling.

2. Zebra Striping Tables

Zebra Striping tables refers to the tables having different color in the alternate rows. Different color in the alternate rows makes easier in distinguishing the rows from each other. It is easier to see the particular row of the table by the color. Placing styling on the table tags can also be added using jQuery.

Example:

An example is the basic one; here the HTML tag table creates a tabular design & after that, styling added to make this table as a Zebra Striping table.

 
 
S.No.
 
Country Code
 
Country
 
Phone Code
 
 
 
1
 
AW
 
Aruba
 
297
 
 
2
 
AU
 
Australia
 
61
 
 
3
 
AT
 
Austria
 
43
 
 
4
 
AZ
 
Azerbaijan
 
994
 
 
5
 
BS
 
Bahamas
 
1241
 
 
6
 
BH
 
Bahrain
 
973
 
 
 

Style:

Below given CSS makes the HTML table Zebra striping.

 table th, table td < text-align: center; >tbody tr:nth-child(even) 

In the below-given output, we can see how to alternate rows of the table having a different colors.

Conclusion

Table without Border is one of the ways of table representation. The table format can also be achieved using other HTML tags like ul > li, div, etc., but the use of a table for tabular structure reduces the styling work while the use of div for tabular design is increasing due to the responsive design approach.

Recommended Articles

This is a guide to Table Without Border in HTML. Here we discuss the introduction, types of Table Without Border, along with the respective examples. You can also go through our other related articles to learn more –

89+ Hours of HD Videos
13 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

97+ Hours of HD Videos
15 Courses
12 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests
125+ Hours of HD Videos
33 Courses
9 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник

How to completely remove borders from HTML table

My goal is to make an HTML page that is similar to a «photo frame». In other words, I want to make a blank page that is surrounded by 4 pictures. This is my code:

.bTop < width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); >.bLeft < width: 212px; height: 280px; background-image: url('../Images/BackLeft.jpg'); >.middle < width: 536px; height: 280px; >.bRight < width: 212px; height: 280px; background-image: url('../Images/BackRight.jpg'); >.bBottom < width: 960px; height: 111px; background-image: url('../Images/BackBottom.jpg'); >

My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?

12 Answers 12

EDIT: As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl’s border-collapse solution.

I actually quite dislike this change so far (don’t work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border’s «priority» calculated and what border styles are «stronger» (double vs. solid etc.).

 
 
first row
 
 
second row
 
 
 ---------- .first .second

Now, with border collapse, this won’t work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

 
 
first row
 
 
second row
 
 
​​​  

You could also use something like «groove|ridge|inset|outset» border style with just a single border. But for me, this is not optimal, because I can’t control both colors.

Maybe there is some simple and nice solution for collapsing borders, but I haven’t seen it yet and I honestly haven’t spent much time on it. Maybe someone here will be able to show me/us 😉

Источник