I have a xxx.css for my whole (all html files) site. In that css I have defined table style that is applied to all tables as default. Here is the code: table,td,th{ border:1px solid #B8B8B8; border-collapse:collapse; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 107%; margin:0; padding:15px 5 px 5px 15px; } td,th{ padding:.2em .5em; vertical-align:top; font-weight:normal; } Code (markup): But I want to make only one table in my site that will be different from default table style. That means different style for table, tr, td, th, tbody, and text inside td. How can I do it? PLEASE HELP ME Thanks in advance.
you have to add ID to that table......<table id="table1"> "table1" is any name that you want then css style is: #table1 td,#table1 td th{ border:1px solid #B8B8B8; border-collapse:collapse; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 107%; margin:0; padding:15px 5 px 5px 15px; } #table1 td,#table1 th{ padding:.2em .5em; vertical-align:top; font-weight:normal; } try this...
...or just add a css class to the table and define your styles on that. You'll get the same result. Like: <table class="myclass"> ...and css like: .myclass th{your table header definitions} .myclass td{your table cell definitions} ...and so on. ID works just fine, but you might need to use the ID for other purposes.
Use a class selector for this because an ID should only be used once per page whereas a class selector can be used as many times as you'd like. This will in validating your HTML.